Question

我有一个带有按钮的列表项，如下所示：

<mx:List contentBackgroundAlpha="0" baseColor="0x333333" leading="10"  id="weekButtonList"  width="260" borderVisible="false"  dataProvider="{_data.mappoints.week.@number}" itemClick="onWeekClick(event);" >
                <mx:itemRenderer  >
                    <mx:Component>
                        <mx:Button  buttonMode="true"  width="260" height="50" label="Week {data}"  />
                    </mx:Component>
                </mx:itemRenderer>
            </mx:List>

无论我做什么，这些按钮之间都有垂直间隙。我已经尝试了从设置“垂直间隙”属性到负数和正数以及更改它们的填充底部和填充顶部的所有内容。我希望按钮垂直对着彼此。我还尝试了“按钮高度”和填充列表组件...仍然没有。我该如何控制它？

Answer 1

如果您可以在flex4而不是3.x中构建项目，则以下解决方案将适用：

在您的申请文件中：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">

<s:List contentBackgroundAlpha="0" baseColor="0x333333" id="weekButtonList"  width="260" borderVisible="false" itemRenderer="ListButton">
    <s:layout>
        <s:VerticalLayout gap="0">
        </s:VerticalLayout>
    </s:layout>
    <s:dataProvider>
        <s:ArrayList>
            <fx:Array>
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="Still No Gap" />
            </fx:Array>
        </s:ArrayList>
    </s:dataProvider>
</s:List>

ListButton.mxml中的

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" height="100%">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:Button label="{data.label}" />

如果选择flex 4，我强烈建议您进行切换。

Answer 2

尝试将按钮paddingTop和paddingBottom设置为0

Answer 3

要添加到greg的答案，一些布局在适用的地方使用verticalGap和horizontalGap。

<s:List>
    <s:layout>
        <s:TileLayout verticalGap="-2" />
    </s:layout>
</s:List>

我认为默认值是0（零）

Flex：列表项之间的垂直间隙不起作用

3 个答案: