<?xml version="1.0" encoding="utf-8"?>
<!--
author: 谢忠持
Application 标签表示当前的是一个flex 程序
Application 本身是个容器,容器内的布局是 absolute,例外有horizontal,vertical可选
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!--
states 不占用布局空间
当前的 页面 元素 在不同的状态下呈现不同的样子
-->
<mx:states>
<mx:State name="CartView">
<mx:SetProperty target="{products}" name="width" value="0"/>
<mx:SetProperty target="{products}" name="height" value="0"/>
<mx:SetProperty target="{CartBox}" name="width" value="100%"/>
<mx:AddChild relativeTo="{CartBox}" position="lastChild">
<mx:DataGrid id="dgCart" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:AddChild>
<mx:AddChild relativeTo="{CartBox}" position="lastChild">
<mx:LinkButton label="Continue Shopping" click="this.currentState='';"/>
</mx:AddChild>
<mx:RemoveChild target="{linkbutton1}"/>
</mx:State>
</mx:states>
<!--
dock = 'true' 表示 ApplicationControlBar停靠在 Application 上
x,y 代表控件的位置
left, right, top, bottom 代表离 父元素 边框的距离 类似 html中的 mergin-left....
ApplicationControlBar 是容器类
-->
<mx:ApplicationControlBar height="90" width="100%" dock="true">
<mx:Canvas width="100%" height="100%">
<mx:Label x="0" y="0" text="flex"/>
<mx:Label x="0" y="41" text="GROCER"/>
<mx:Button y="10" label="View Chart" id="btnViewCart" right="90"/>
<mx:Button y="10" label="CheckOut" id="btnCheckOut" right="10"/>
</mx:Canvas>
</mx:ApplicationControlBar>
<mx:Label text="(C) 2006,FlexGrocer" right="10" bottom="10"/>
<!--
HBox 是容器类 HBox 中的子元素 横向摆放
VBox 也是容器类 VBox 中的子元素 竖向摆放
-->
<mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
<mx:VBox width="100%" height="100%" id="products">
<mx:Label text="Milk" id="prodName"/>
<mx:Label text="$1.99" id="price"/>
<mx:Button label="Add To Cart" id="add"/>
</mx:VBox>
<mx:VBox height="100%" id="CartBox">
<mx:Label text="Your Cart Total:$"/>
<mx:LinkButton label="View Cart" click="this.currentState = 'CartView';" id="linkbutton1"/>
</mx:VBox>
</mx:HBox>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!--
author: 谢忠持
实现复杂布局用的
把当前页面格式化成表格。
通过设置占用表格来设置布局
-->
<mx:constraintColumns>
<mx:ConstraintColumn id="col1" width="33%"/>
<mx:ConstraintColumn id="col2" width="33%"/>
<mx:ConstraintColumn id="col3" width="33%"/>
</mx:constraintColumns>
<mx:constraintRows>
<mx:ConstraintRow id="row1" height="50%"/>
<mx:ConstraintRow id="row2" height="50%"/>
</mx:constraintRows>
<mx:TextArea id="ta1" text="TextArea1" left="col1:5" right="col1:5" top="row1:10" bottom="row1:20" backgroundColor="yellow" fontSize="20"/>
<mx:TextArea id="ta2" text="TextArea2" left="col1:5" right="col2:5" top="row2:10" bottom="row2:10" backgroundColor="red" fontSize="20" color="white"/>
<mx:TextArea id="ta3" text="TextArea3" left="col3:5" right="col3:5" top="row1:10" bottom="row2:20" backgroundColor="green" fontSize="20" color="white"/>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:ApplicationControlBar dock="true">
<mx:LinkButton label="ALL" click="this.currentState=''"/>
<mx:LinkButton label="Sales" click="this.currentState='fullSales'"/>
<mx:LinkButton label="Categories" click="this.currentState='fullType'"/>
<mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/>
</mx:ApplicationControlBar>
<mx:states>
<mx:State name="fullSales">
<mx:SetProperty target="{rightCharts}" name="width" value="0"/>
<mx:SetProperty target="{rightCharts}" name="height" value="0"/>
</mx:State>
<mx:State name="fullType">
<mx:SetProperty target="{sales}" name="width" value="0"/>
<mx:SetProperty target="{sales}" name="height" value="0"/>
<mx:SetProperty target="{comp}" name="width" value="0"/>
<mx:SetProperty target="{comp}" name="height" value="0"/>
</mx:State>
<mx:State name="fullComp">
<mx:SetProperty target="{sales}" name="width" value="0"/>
<mx:SetProperty target="{sales}" name="height" value="0"/>
<mx:SetProperty target="{type}" name="width" value="0"/>
<mx:SetProperty target="{type}" name="height" value="0"/>
</mx:State>
</mx:states>
<mx:Panel id="sales" width="100%" height="100%" title="Sales Chart">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
<mx:VBox id="rightCharts" width="100%" height="100%">
<mx:Panel id="type" height="100%" width="100%" title="Category Chart">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
<mx:Panel id="comp" height="100%" width="100%" title="Comarison Chart">
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
</mx:VBox>
</mx:Application>
分享到:
相关推荐
在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...
网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
携程网站 移动端 Flex布局,新人可以利用此资源来学习flex布局的应用 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
flex布局实现顶部导航,底部导航固定,内容区内容高度超过可展示区域时出现滚动条,内容高度不足时铺满屏幕。
Flex布局学习资料,2018年整理的不错的Flex布局学习教程
html+css,使用flex布局搭建页面,纯前端,初学党可借鉴学习如何使用flex布局页面
flex布局.html
Flex布局.xmind
微信小程序,Flex布局示例源代码,包括横向布局,纵向布局,基本涵盖了Flex布局的知识点,有相关的页面布局需求,可以直接拿来使用。
Flex布局之关于组件的大小 Flex布局之关于组件的大小
flex布局培训PPT,适用于H5,小程序,ReactNative,Flutter的布局教程。
关于Flex布局的笔记整理,能够详细理解Flex布局原理和用法,仅供自己学习。
}设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”...
可以实现flex布局的基本功能,flex的基本布局模板
flex布局 justify-content 解决最后一排数量不够自动向两端排列问题,简单,高效,好用。
微信小程序flex布局demo
移动web开发实例flex布局案例源码
参照阮一峰flex布局,以及实例DOM,做了部分修改,可以选择属性值看效果,方便理解