Flex中如何通过includeInLayout和visible属性设置Form显示隐藏

最新推荐文章于 2023-05-20 16:00:03 发布

原创最新推荐文章于 2023-05-20 16:00:03 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #Adobe #XML

Flex 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种利用MXML中的includeInLayout和visible属性来实现元素的真正隐藏的方法。通过示例代码展示了如何根据按钮的状态动态控制表单项的可见性和布局参与情况。

通过includeInLayout和visible属性设置属性释放真正隐藏

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application name="FormItem_includeInLayout_test" 
        xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 
  
    <mx:Style> 
        Form { 
            indicatorGap: 0; 
            paddingLeft: 0; 
            paddingRight: 0; 
            paddingTop: 0; 
            paddingBottom: 0; 
        } 
    </mx:Style> 
  
    <mx:ApplicationControlBar dock="true"> 
        <mx:Button id="bccButton" 
                label="Show BCC" 
                toggle="true" 
                selected="false" /> 
        <mx:Button id="fromButton" 
                label="Show From" 
                toggle="true" 
                selected="false" /> 
    </mx:ApplicationControlBar> 
  
    <mx:HBox width="100%"> 
        <mx:Button id="sendButton" 
                label="Send" 
                height="100%" /> 
        <mx:Form width="100%"> 
            <mx:FormItem label="From:" 
                    includeInLayout="{fromButton.selected}" 
                    visible="{fromButton.selected}" 
                    width="100%"> 
                <mx:ComboBox id="fromComboBox" 
                        width="100%" /> 
            </mx:FormItem> 
            <mx:FormItem label="To:" width="100%"> 
                <mx:TextInput id="toTextInput" 
                        width="100%" /> 
            </mx:FormItem> 
            <mx:FormItem label="CC:" width="100%"> 
                <mx:TextInput id="ccTextInput" 
                        width="100%" /> 
            </mx:FormItem> 
            <mx:FormItem label="BCC:" 
                    includeInLayout="{bccButton.selected}" 
                    visible="{bccButton.selected}" 
                    width="100%"> 
                <mx:TextInput id="bccTextInput" 
                        width="100%" /> 
            </mx:FormItem> 
            <mx:FormItem label="Subject:" 
                    width="100%"> 
                <mx:TextInput id="subjectTextInput" 
                        width="100%" /> 
            </mx:FormItem> 
        </mx:Form> 
    </mx:HBox> 
  
    <mx:TextArea id="bodyTextArea" 
            width="100%" 
            height="100%" /> 
  
</mx:Application>