Question

我正在尝试使用Flex开发一个Call Log，而且我对ItemRenders有一些麻烦。事实上，这就是我所拥有的：

The original state

当您点击一个项目时，项目的大小会更改以显示更多详细信息：

The clicked state

但正如您所看到的，每个项目都会受到此调整大小的影响。平铺布局采用最高渲染并将其高度应用于其他渲染。

这是我的代码，我称之为Render：

    <s:DataGroup id="TileListUsers"
                 left="10" right="10" top="10" bottom="10" width="300"
                 itemRenderer="assets.render.CallLogRender"
                 dataProvider="{ListCall}"
                 horizontalCenter="0" verticalCenter="0" contentBackgroundAlpha="0.0">
        <s:layout>
            <s:TileLayout horizontalGap="15" requestedColumnCount="1" verticalGap="15" />
        </s:layout>
    </s:DataGroup>

在Render中，我使用了三个BorderContainer，一个用于第一个块，一个用于第二个块，另一个用于显示它们之间的详细信息：

        override public function set data(value:Object):void {
            super.data = value;

            CallerIDLabel.text = "Appel du : " + data.CallerID;
            StartHourLabel.text = data.StartHour;
            StartDateLabel.text = data.StartDate;
            if(value == null){
                return;
            }
            if (!data.Answer){      
                ShadowColor.color=0xCC9900;
                CallerIDLabel.text = "Appel manqué : " + data.CallerID;
                SourceIcon.source=callFinished;
            }   
        }

        private function onClick():void{
            if (data.Answer){
                this.height=170;
                DetailLineContainer.visible=true;
                SecondBlocContainer.visible=true;
            }
        }
    ]]>
</fx:Script>


<s:BorderContainer id="DetailLineContainer" x="0" y="39" width="100%" height="101"
                   backgroundAlpha="0.0" borderColor="#FFFFFF" borderVisible="false"
                   borderWeight="1" cornerRadius="5" visible="false" >
    <s:Line id="LineDetail" x="25" y="0" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="#aeaeae" weight="3" caps="square"/>
        </s:stroke>
    </s:Line>
    <s:Graphic x="21" y="25" width="8" height="8">    
        <s:Ellipse x="0" y="0" width="8" height="8">
            <s:fill>
                <s:SolidColor id="CircleColor" color="#5b5b5b"/>
            </s:fill>
        </s:Ellipse>
    </s:Graphic>
    <s:Graphic x="21" y="53" width="8" height="8">    
        <s:Ellipse x="0" y="0" width="8" height="8">
            <s:fill>
                <s:SolidColor id="CircleColor2" color="#5b5b5b"/>
            </s:fill>
        </s:Ellipse>
    </s:Graphic>
    <s:Label id="DurationLabel" x="35" y="25" width="250"
             color="#929292" fontFamily="proxima" fontSize="13"
             text="Durée de l'appel : 13 minutes 23 secondes" textAlign="left"
             verticalAlign="top"/>
    <s:Label id="QualityLabel" x="35" y="52" width="250"
             color="#929292" fontFamily="proxima" fontSize="13"
             text="Qualité de l'appel : moyenne" textAlign="left"
             verticalAlign="top"/>
</s:BorderContainer>

<s:BorderContainer id="FirstBlocContainer" width="100%" height="50" click="onClick()" backgroundColor="#FFFFFF"
                   borderColor="#FFFFFF" borderVisible="false" borderWeight="1" cornerRadius="5">
    <s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
        <s:Graphic id="Shadow" x="0" y="0" width="100%" height="100%">
            <s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
                <s:fill>
                    <s:SolidColor id="ShadowColor" color="#70b13c"/>
                </s:fill>
            </s:Rect>
        </s:Graphic>
        <s:Image id="SourceIcon" horizontalCenter="0"
                 source="@Embed('/assets/images/CallLogIncomming.png')" verticalCenter="0"/>
    </s:BorderContainer>

    <s:Graphic id="CallState" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
        <s:Rect x="0" y="-1" width="260" height="2">
            <s:fill>
                <s:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>
    </s:Graphic>
    <s:Label id="CallerIDLabel" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
             fontSize="14" maxDisplayedLines="2" text="Appel du : 0636360400" textAlign="left"
             verticalAlign="middle" verticalCenter="0"/>
    <s:Label id="StartDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
             textAlign="center" verticalAlign="middle"/>
    <s:Label id="StartHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
             text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>

<s:BorderContainer id="SecondBlocContainer" x="0" y="117" width="100%" height="50"
                   backgroundColor="#FFFFFF" borderColor="#FFFFFF" borderVisible="false"
                   borderWeight="1" cornerRadius="5" visible="false" >
    <s:BorderContainer width="50" height="50" borderVisible="false" backgroundAlpha="0.0">
        <s:Graphic id="CallState2" x="0" y="0" width="100%" height="100%">
            <s:Rect x="0" y="0" width="50" height="50" bottomLeftRadiusX="5" topLeftRadiusX="5">
                <s:fill>
                    <s:SolidColor id="ShadowColor2" color="#B1463C"/>
                </s:fill>
            </s:Rect>
        </s:Graphic>
        <s:Image id="SourceIcon2" horizontalCenter="0"
                 source="@Embed('/assets/images/CallLogFinished.png')" verticalCenter="0"/>
    </s:BorderContainer>

    <s:Graphic id="Shadow2" x="0" bottom="0" width="100%" height="2%" alpha="0.15">
        <s:Rect x="0" y="-1" width="260" height="2">
            <s:fill>
                <s:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>
    </s:Graphic>
    <s:Label id="CallerIDLabel2" left="60" width="180" color="#5B5B5B" fontFamily="proxima"
             fontSize="14" maxDisplayedLines="2" text="Vous avez raccroché" textAlign="left"
             verticalAlign="middle" verticalCenter="0"/>
    <s:Label id="StopDateLabel" y="10" right="5" width="50" color="#C0C4C3" fontSize="12" text="08/04/14"
             textAlign="center" verticalAlign="middle"/>
    <s:Label id="StopHourLabel" y="24" right="5" width="50" color="#C0C4C3" fontSize="12"
             text="12:45" textAlign="center" verticalAlign="middle"/>
</s:BorderContainer>

有没有办法说TileLayout只是增加一个组件的高度而不影响其他组件？

Answer 1

如果只有一列，为什么要使用TileLayout？使用VerticalLayout并将其variableRowHeight属性设置为true。这是example。

增加一个ItemRender的高度

1 个答案: