Question

有如所提供图片中所述排列的弹性图标：

每当用户点击空白区域（标记为红色）时，都会点击图标（标记为“A”）。这是常见的弹性问题吗？知道如何解决这个问题吗？

编辑：我在这里粘贴了所有相关代码。这是Flex的TileList问题

xmlns:mx="http://www.adobe.com/2006/mxml"

private var systemArray : ArrayCollection = new ArrayCollection;

private function init() : void
{
    //adding icons
    systemArray.addItem({name: "Some Name1",
                             state: "classHeaderListState", toolTip: "",
                             icon: new AssetLib().classHeaderIcon32,
                             id: "entityClassesForm"});
    systemArray.addItem({name: "Some Name2",
                             state: "resourceListState", toolTip: "",
                             icon: new AssetLib().resourceIcon32, id: "resourcesForm"});

}

private function onClickList(e : Event) : void
{   
    var index : int;
    index = TileList(e.currentTarget).selectedIndex;
    if (index == -1)
        return;
    currentState = systemArray.getItemAt(index).state;
    (this.parent as Pod).title = systemArray.getItemAt(index).name;
}


<mx:State name="MenuState"
          enterState="(this.parent as Pod).title='System Tools';udfButtonPanel.visible = false;">
    <mx:AddChild position="lastChild">
        <mx:TileList id="list"
                     width="100%"
                     themeColor="#ffffff"
                     height="100%"
                     dataProvider="{ systemArray }"
                     itemClick="onClickList(event)"
                     borderStyle="none"
                     />

    </mx:AddChild>
</mx:State>

Answer 1

我遇到了同样的问题。似乎单击 flex 留下的空白空间会将 click 事件传播到您在它周围的 flex 上的复选框或元素。当 flexbox 占据所有宽度，但在开始时对齐它的内容时，就会发生这种情况。

有一些解决方法，最简单（也是最丑陋）的是使用 width: fit-content。

如果您的父母没有特定风格，您也可以使用 display: inline-flex。

Flex窗口 - 单击空白区域

1 个答案: