按钮宽度中的额外像素

Posted 2023-02-18

【中文标题】按钮宽度中的额外像素

【英文标题】：Extra Pixels In Button Width

【发布时间】：2013-05-21 20:59:33

【问题描述】：

<s:Button id="btn1" label="1"  includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn2" label="2"  includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn3" label="3"  includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id="bigButton" label="bigButton"  includeInLayout="false" visible="false" />

private function onSmallBtnClick():void 
    hideBtn(btn1);
    hideBtn(btn2);
    hideBtn(btn3);
    showBtn(bigButton);


private function showBtn(button:Button):void 
    button.visible = true;
    button.includeInLayout = true;


private function hideBtn(button:Button):void 
    button.visible = false;
    button.includeInLayout = false;

大家好，在上面的 Flex 代码中，我的界面上有 4 个四个按钮。界面应以可见的小按钮 1、2、3 和不可见的大按钮开始。单击任一小按钮时，大按钮将代替 3 个小按钮出现。小按钮的宽度设置为 18，而大按钮的宽度设置为 72。

我的问题是，bigButton 的宽度不应该是 54，因为 18x3 = 54？或者按钮中是否有一些我应该知道的填充？在这个live docs 页面中，它说..

默认情况下，Flex 会拉伸 Button 控件的宽度以适应 它的标签、任何图标以及图标周围 6 像素的内边距。你可以 通过显式设置 width 属性覆盖此默认宽度 Button 控件的特定值或其百分比 父容器。如果指定百分比值，按钮 在其最小和最大宽度之间调整大小作为其大小 父容器发生变化。

这可能是问题吗？因为我有 3 个按钮，并且图标周围的填充占用 6x3 = 18 像素。按钮之间似乎没有任何间隙。所以我很想知道额外的 18 个像素是从哪里来的。

谢谢。

【问题讨论】：

你是说hgroup的宽度默认为72？而不是 54？

【参考方案1】：

一旦我没有看到任何为按钮设置的 x 或 left 东西，我猜你使用类似 HGroup 或任何其他带有 HorizontalLayout 的容器。 它有一个名为gap 的属性，该属性默认为6。 但是不会加18px，会加12px...

尝试将所有按钮的minWidth 设置为0。

【讨论】：

感谢您的回答！我确实在使用 HGroup。

但我不确定额外的 6 个像素是从哪里来的。所以我会等待一个更好的答案，然后才能接受。再次感谢！