文档章节

flex---->数据绑定、数据列表

小强斋太
 小强斋太
发布于 2016/11/09 20:07
字数 3544
阅读 1
收藏 0
点赞 0
评论 0

 数据绑定


在呈现单个数据的时候,可以使用文本控件。那么在呈现多条数据的时候,如何表现出来呢?在Flex中就已经提供了呈现多条数据的各种数据绑定控件,使用这些控件,就可以设计出各种样式的数据列表。:
数据列表List
横向数据列表HorizontalList
交叉数据列表TileList
下拉列表ComBox
数据网格DataGrid
树列表Tree

一、数据列表
在呈现一个一维数据集合的时候,使用数据列表是最直观方便的。默认情况下,数据列表是一列多行的形式,即纵向的呈现数据。

1.1 使用List控件创建数据列表
在Flex中,已经提供了一个数据列表List控件。将数据列表List控件与相关的数据集绑定,便可以在数据列表中呈现需要的数据。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:List x="62" y="34" width="73" height="157" fontSize="14">
		<mx:dataProvider>
			<mx:String>北京</mx:String>
			<mx:String>上海</mx:String>
			<mx:String>广州</mx:String>
			<mx:String>深圳</mx:String>
			<mx:String>重庆</mx:String>
			<mx:String>沈阳</mx:String>
		</mx:dataProvider>
	</mx:List>
</mx:Application>

1.2 使用ActionScript在List控件中绑定数据
除了在List控件的内部直接填充数据外,还可以使用ActionScript脚本语言在外部定义数据。通过使用ActionScript语言定义的数据集与控件List绑定,也可以呈现出来,并且比之前在内部定义的方法更灵活和有效。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			/**
			 * 初始化,绑定数据到列表中
			 * */
			private function InitApp():void
			{
				// 定义对象
				var city:Object;
				// 定义集合
				var citys:ArrayCollection = new ArrayCollection();
				
				// 添加数据
				city = new Object();
				city.label = "北京";
				city.data = "55%";
				citys.addItem(city);
				
				// 添加数据
				city = new Object();
				city.label = "广州";
				city.data = "30%";
				citys.addItem(city);
				
				// 添加数据
				city = new Object();
				city.label = "深圳";
				city.data = "60%";
				citys.addItem(city);
				
				// 添加数据
				city = new Object();
				city.label = "沈阳";
				city.data = "50%";
				citys.addItem(city);
				
				// 绑定
				listCity.dataProvider = citys;
			}
			
			/**
			 * 设置显示内容
			 * */
			private function listCity_labelFunction(item:Object):String
			{
				return item.label + "," + item.data;
			}
		]]>
	</mx:Script>
	<mx:List id="listCity" labelFunction="listCity_labelFunction" x="62" y="34" 
		width="93" height="137" fontSize="14">
	</mx:List>
</mx:Application>

labelFunction(value:Function):void用户提供的函数,在每个项目上运行以确定其标签。默认情况下,列表将在每个数据提供程序项目上查找label 属性并将其显示出来。但是,一些数据集不包含label 属性,也不包含可用于显示的其它属性。例如,数据集中包含 lastName 和 firstName 字段,但您希望显示全名。 您可以提供一个labelFunction,用于查找合适的字段并返回可显示的字符串。
1.3 获取List控件的数据
能够获取到List控件中项的数据,是与用户交互的直接手段。获取List控件中已选择的数据项通常使用selectedItem方法。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			/**
			 * 初始化,绑定数据到列表中
			 * */
			private function InitApp():void
			{
				// 定义对象
				var city:Object;
				// 定义集合
				var citys:ArrayCollection = new ArrayCollection();
				
				// 添加数据
				city = new Object();
				city.label = "北京";
				city.data = "55%";
				citys.addItem(city);
				
				// 添加数据
				city = new Object();
				city.label = "广州";
				city.data = "30%";
				citys.addItem(city);
				
				// 添加数据
				city = new Object();
				city.label = "深圳";
				city.data = "60%";
				citys.addItem(city);
				
				// 添加数据
				city = new Object();
				city.label = "沈阳";
				city.data = "50%";
				citys.addItem(city);
				
				// 绑定
				listCity.dataProvider = citys;
			}
			
			/**
			 * 单击选择事件
			 * */
			private function listCity_click():void
			{
				lbSelectItem.text = "您选择的是:" + listCity.selectedItem.label + 
									"(" + listCity.selectedItem.data + ")";
			}
		]]>
	</mx:Script>
	<mx:List id="listCity" labelField="label" click="listCity_click()"
		x="43" y="29" width="93" height="137" fontSize="14">
	</mx:List>
	<mx:Label id="lbSelectItem" x="10" y="189" text="" fontSize="14" width="183" color="#FFFFFF"/>
</mx:Application>


1.4 在数据中嵌入图片
除了在数据列表List控件中填充数据外,还可以在数据中嵌入图片资源。嵌入资源后的数据列表List控件,表现会更加丰富。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="InitApp()">
	<mx:Script>
		<![CDATA[
			// 定义手机图标,并嵌入到程序中
			[Embed(source="assets/mobileIcon.jpg")]
			private var mobileSymbol:Class;

			/**
			 * 初始化,绑定数据
			 * */
			private function InitApp():void
			{
				// 定义数组
				var mobileArr:Array = 
				[
					{mobileIcon:mobileSymbol, mobile:"摩托罗拉", ballot:"12.9%"},
					{mobileIcon:mobileSymbol, mobile:"诺基亚", ballot:"32.26%"},
					{mobileIcon:mobileSymbol, mobile:"索尼爱立信", ballot:"6.45%"},
					{mobileIcon:mobileSymbol, mobile:"三星", ballot:"12.9%"},
					{mobileIcon:mobileSymbol, mobile:"波导", ballot:"3.23%"}
				]
				
				// 绑定数据
				listMobile.dataProvider = mobileArr;
			}
		]]>
	</mx:Script>
	<mx:List id="listMobile" labelField="mobile" iconField="mobileIcon" x="40" y="30" width="125" fontSize="14" />
</mx:Application>


二、 横向数据列表
多条数据除了以纵向的方式呈现外,还可以用横向的方式呈现。

2.1 使用HorizontalList控件
在Flex中,提供了一个横向列表的控件HorizontalList,使用HorizontalList可以设计一个横向列表的多条数据呈现。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Array id="arr">
        <mx:Object label="Flex"
                thumbnailImage="assets/fx_appicon-tn.gif"
                fullImage="assets/fx_appicon.jpg" />
        <mx:Object label="Flash"
                thumbnailImage="assets/fl_appicon-tn.gif"
                fullImage="assets/fl_appicon.jpg" />
        <mx:Object label="Illustrator"
                thumbnailImage="assets/ai_appicon-tn.gif"
                fullImage="assets/ai_appicon.jpg" />
        <mx:Object label="Dreamweaver"
                thumbnailImage="assets/dw_appicon-tn.gif"
                fullImage="assets/dw_appicon.jpg" />
        <mx:Object label="ColdFusion"
                thumbnailImage="assets/cf_appicon-tn.gif"
                fullImage="assets/cf_appicon.jpg" />
        <mx:Object label="Flash Player"
                thumbnailImage="assets/fl_player_appicon-tn.gif"
                fullImage="assets/fl_player_appicon.jpg" />
        <mx:Object label="Fireworks"
                thumbnailImage="assets/fw_appicon-tn.gif"
                fullImage="assets/fw_appicon.jpg" />
        <mx:Object label="Lightroom"
                thumbnailImage="assets/lr_appicon-tn.gif"
                fullImage="assets/lr_appicon.jpg" />
        <mx:Object label="Photoshop"
                thumbnailImage="assets/ps_appicon-tn.gif"
                fullImage="assets/ps_appicon.jpg" />
    </mx:Array>
    
    <mx:HorizontalList id="horizontalList"
                    labelField="label"
                    iconField="thumbnailImage"
                    dataProvider="{arr}"
                    itemRenderer="CustomItemRenderer"
                    columnCount="4"
                    columnWidth="125"
                    rowCount="1"
                    rowHeight="100"
                    horizontalScrollPolicy="on" />
</mx:Application>

2 自定义ItemRenderer属性
在上一节中,通过ItemRenderer属性定义了子数据项的类型Image。除了可以定义一个系统集成的数据类型外,还可以自定义一个ItemRenderer属性的值。

3 二维数据列表
除了纵向或横向的呈现数据外,还可以自定义的以二维的形式呈现数据。这种方式更加灵活,开发者可以根据实际情况,设置行数和列数。本节将会详细讲述如何设计一个二维数据列表。

3.1 使用TileList控件
在Flex中,已经提供了可以设计二维数据列表的控件TileList。通过设置此控件的相关属性,就可以定制列数和行数。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			
			[Bindable]
			[Embed(source="assets/dc_canon_ixus_80.jpg")]
			public var phone1:Class;
			 
			[Bindable]
			[Embed(source="assets/dc_fuji_s1000fd.jpg")]
			public var phone2:Class;
			 
			[Bindable]
			[Embed(source="assets/dc_nikon_D90.jpg")]
			public var phone3:Class;
			 
			[Bindable]
			[Embed(source="assets/dc_panasonic_lx3gk.jpg")]
			public var phone4:Class;
			
			[Bindable]
			[Embed(source="assets/dc_sony_t700.jpg")]
			public var phone5:Class;

		]]>
	</mx:Script>
	
	<mx:TileList id="CameraSelection" height="300" width="240"  
        maxColumns="2" rowHeight="100" columnWidth="110" x="84" y="19">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="佳能 IXUS 80" icon="{phone1}"/>
                <mx:Object label="富士 S1000FD" icon="{phone2}"/>
                <mx:Object label="尼康 D90" icon="{phone3}"/>
                <mx:Object label="松下 LX3GK" icon="{phone4}"/>
                <mx:Object label="索尼 T700" icon="{phone5}"/>
            </mx:Array>
        </mx:dataProvider>
    </mx:TileList>
	
</mx:Application>


3.2 获取TileList控件中的数据
获取TileList控件中的数据是与用户交互的最主要的应用。要获取TileList控件中的某条数据项,需要通过设置其单击事件。本节将讲解如何获取TileList控件中的某条数据项内容。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			[Bindable]
			[Embed(source="assets/dc_canon_ixus_80.jpg")]
			public var dc1:Class;
             
			[Bindable]
			[Embed(source="assets/dc_fuji_s1000fd.jpg")]
			public var dc2:Class;
			 
			[Bindable]
			[Embed(source="assets/dc_nikon_D90.jpg")]
			public var dc3:Class;
			 
			[Bindable]
			[Embed(source="assets/dc_panasonic_lx3gk.jpg")]
			public var dc4:Class;
			
			[Bindable]
			[Embed(source="assets/dc_sony_t700.jpg")]
			public var dc5:Class;

			// 数据列表单击事件
			private function DCSelection_change(e:MouseEvent):void
			{
				// 设置 lbDC 文本控件的内容
				lbDC.text = "您选择的产品是:" + DCSelection.selectedItem.label;
			}

		]]>
	</mx:Script>
	
	<mx:TileList id="DCSelection" height="300" width="240" click="DCSelection_change(event)" 
            maxColumns="2" rowHeight="100" columnWidth="110" x="86" y="63">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="佳能 IXUS 80" icon="{dc1}"/>
                    <mx:Object label="富士 S1000FD" icon="{dc2}"/>
                    <mx:Object label="尼康 D90" icon="{dc3}"/>
                    <mx:Object label="松下 LX3GK" icon="{dc4}"/>
                    <mx:Object label="索尼 T700" icon="{dc5}"/>
                </mx:Array>
            </mx:dataProvider>
        </mx:TileList>
	<mx:Label id="lbDC" x="86" y="32" text="Label" fontSize="14" width="240"/>
	
</mx:Application>


四、下拉列表
相比较与数据列表,下拉列表则有节省空间等优点。

4.1 使用ComBox控件
在Flex中,提供了下拉列表ComBox控件。下拉列表ComBox控件的数据源可以有两种方式,一种是Object类型,另一种是String。其中Object类型可以同时存储相关数据的属性,如编号等。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:ComboBox x="36" y="33" fontSize="14" width="96">
		<mx:ArrayCollection>
			<mx:Object label="北京" data="0" />
			<mx:Object label="上海" data="1" />
			<mx:Object label="广州" data="2" />
			<mx:Object label="深圳" data="3" />
		</mx:ArrayCollection>
	</mx:ComboBox>
	<mx:ComboBox x="151" y="33" fontSize="14">
		<mx:ArrayCollection>
			<mx:String>北京</mx:String>
			<mx:String>上海</mx:String>
			<mx:String>广州</mx:String>
			<mx:String>深圳</mx:String>
		</mx:ArrayCollection>
	</mx:ComboBox>
	
</mx:Application>


4.2 获取下拉列表中的数据
通过单击事件,就可以获取下拉列表中选择的数据项。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.DropdownEvent;
			
			// 下拉列表控件的 change 事件
			private function cmbCity_change(event:Event):void
			{
				// 设置 lbCity 文本控件的内容
				lbCity.text = "城市编号:" + event.currentTarget.selectedItem.data;
				lbCity.text += " 城市名称:" + event.currentTarget.selectedItem.label;
			}

		]]>
	</mx:Script>
	<mx:ComboBox id="cmbCity" x="35" y="60" fontSize="14" width="96" 
		change="cmbCity_change(event)">
		<mx:ArrayCollection>
			<mx:Object label="北京" data="0" />
			<mx:Object label="上海" data="1" />
			<mx:Object label="广州" data="2" />
			<mx:Object label="深圳" data="3" />
		</mx:ArrayCollection>
	</mx:ComboBox>
	<mx:Label id="lbCity" x="35" y="23" text="Label" fontSize="14"/>
</mx:Application>

五、数据网格
数据网格是最常用的数据呈现方式之一,对某些较为复杂的数据只能用数据网格的方式表现。

5.1 使用DataGrid控件
在Flex中已经提供了数据网格DataGrid控件,使用这个控件可以实现二维数据列表的呈现。本节将会讲述如何使用数据网格DataGrid控件,并填充数据集。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid x="36" y="28">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:Object>
					<mx:city>上海</mx:city>
					<mx:population>1270.22</mx:population>
				</mx:Object>
				<mx:Object>
					<mx:city>北京</mx:city>
					<mx:population>1067.00</mx:population>
				</mx:Object>
				<mx:Object>
					<mx:city>重庆</mx:city>
					<mx:population>999.05</mx:population>
				</mx:Object>
				<mx:Object>
					<mx:city>武汉</mx:city>
					<mx:population>768.10</mx:population>
				</mx:Object>
				<mx:Object>
					<mx:city>天津</mx:city>
					<mx:population>752.21</mx:population>
				</mx:Object>
			</mx:ArrayCollection>
		</mx:dataProvider>
	</mx:DataGrid>
</mx:Application>

5.2 定义DataGrid控件的列
默认情况下,DataGrid控件列的标题为字段名称。通过设置DataGridColumn属性可以自定义列的标题。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:DataGrid x="36" y="28">
  <mx:dataProvider>
   <mx:ArrayCollection>
    <mx:Object city="上海" population="1270.22" />
    <mx:Object city="北京" population="1067.00" />
    <mx:Object city="重庆" population="999.05" />
    <mx:Object city="武汉" population="768.10" />
    <mx:Object city="天津" population="752.21" />
   </mx:ArrayCollection>
  </mx:dataProvider>
  <mx:columns>
   <mx:DataGridColumn dataField="city" headerText="城市"/>
   <mx:DataGridColumn dataField="population" headerText="人口"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

5.3 获取DataGrid控件的数据
想要获取DataGrid控件中指定单元格的数据,需要通过单击事件,使用selectedItem属性得到。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Script>
		<![CDATA[
			import mx.events.ListEvent;
			
			/**
			 * 单击事件
			 * */
			private function itemClickHandle(event:ListEvent):void
			{
				// 获取城市名称
				lbCity.text = event.currentTarget.selectedItem.city;
				// 获取人口
				lbPopu.text = event.currentTarget.selectedItem.population;
			}
		]]>
	</mx:Script>

	<mx:DataGrid id="dg" x="36" y="28" itemClick="itemClickHandle(event)">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:Object city="上海" population="1270.22" />
				<mx:Object city="北京" population="1067.00" />
				<mx:Object city="重庆" population="999.05" />
				<mx:Object city="武汉" population="768.10" />
				<mx:Object city="天津" population="752.21" />
			</mx:ArrayCollection>
		</mx:dataProvider>
		<mx:columns>
			<mx:DataGridColumn dataField="city" headerText="城市"/>
			<mx:DataGridColumn dataField="population" headerText="人口"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="36" y="193" text="城市:" fontSize="14"/>
	<mx:Label x="84" y="193" text="请选择" fontSize="14" id="lbCity"/>
	<mx:Label x="36" y="233" text="人口:" fontSize="14"/>
	<mx:Label x="84" y="233" text="请选择" fontSize="14" id="lbPopu"/>
	
</mx:Application>


5.4 DataGrid控件的排序
在查看网格数据的时候,用户常常需要按照一定的循序查找数据,以最快捷的方式找到需要的数据。排序功能可以做到上述要求,使用户按照自己的方式查找数据。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			import mx.collections.SortField;
			import mx.collections.Sort;
			import mx.collections.ArrayCollection;
			// 定义数据集合
			private var cityArrColl:ArrayCollection;
			
			/**
			 * 创建数据集合,并绑定到数据网格控件中
			 * */
			private function loadData():void
			{
				var cityArray:Array = [
										{city:'天津', population:'752.21'},
										{city:'北京', population:'1067.00'},
										{city:'武汉', population:'768.10'},
										{city:'上海', population:'1270.22'},
										{city:'重庆', population:'999.05'}
									];
				
				// 创建数据集合
				cityArrColl = new ArrayCollection(cityArray);
				// 绑定数据源
				dgCity.dataProvider = cityArrColl;
			}
			
			/**
			 * 按照城市名称和人口排序
			 * */
			private function rbgCitySort_change(event:Event):void
			{
				// 创建 Sort 对象
				var sortCity:Sort = new Sort();
				// 创建两个 SortField 对象,并设置参数
				var sortByCity:SortField = new SortField("city", true, true);
				var sortByPopu:SortField = new SortField("population", true, true, true);
				// 获取单选按钮ID
				var sortId:String = event.target.selection.id;
				
				// 根据选择的类型,排序
				switch(sortId)
				{
					case "rbByCity":
						// 按城市排序
						sortCity.fields = [sortByCity];
						break;
					case "rbByPopu":
						// 按人口排序
						sortCity.fields = [sortByPopu];
						break;
					default:
						break;
				}
				
				// 排序
				cityArrColl.sort = sortCity;
				// 刷新数据集
				cityArrColl.refresh();
			}
		]]>
	</mx:Script>
	
	<mx:DataGrid id="dgCity" x="39" y="64" fontSize="14" creationComplete="loadData()">
		<mx:columns>
			<mx:DataGridColumn dataField="city" headerText="城市"/>
			<mx:DataGridColumn dataField="population" headerText="人口"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:RadioButtonGroup id="rbgCitySort" change="rbgCitySort_change(event)" />
	<mx:RadioButton id="rbByCity" x="39" y="24" label="按城市排序" 
		groupName="rbgCitySort" fontSize="14"/>
	<mx:RadioButton id="rbByPopu" x="142" y="24" label="按人口排序" 
		groupName="rbgCitySort" fontSize="14"/>
	
</mx:Application>


六、 树形式的呈现方式
树是以节点为基础向下延伸的呈现数据的方式。通常树被用作数据导航,但同时,树也需要外部或内部的数据加以绑定。

6.1 使用Tree控件
在Flex中提供了树Tree控件,使用该控件,可以使数据以树的形式表现出来。通常绑定在Tree控件的数据是XML格式的对象。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Tree labelField="@label" width="200" fontSize="14" x="38" y="28">
		<mx:dataProvider>
			<mx:XMLList>
				<province label="广东省">
					<city label="广州市" />
					<city label="深圳市" />
				</province>
				<province label="北京市">
					<city label="朝阳区" />
					<city label="东城区" />
				</province>
			</mx:XMLList>
		</mx:dataProvider>
	</mx:Tree>
</mx:Application>


6.2 获取Tree控件的数据项
获取Tree控件的数据项的方法是通过change事件,selectedItem属性中记录了选取数据项的内容。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			/**
			 * change 事件, 获取树形控件选择的数据项
			 * */
			private function treeCity_change(event:Event):void
			{
				lbCity.text = "你选择的是:" + event.currentTarget.selectedItem.@label;
			}
		]]>
	</mx:Script>
	<mx:Tree id="treeCity" labelField="@label" width="200" fontSize="14" 
		x="38" y="63" change="treeCity_change(event)">
		<mx:dataProvider>
			<mx:XMLList>
				<province label="广东省">
					<city label="广州市" />
					<city label="深圳市" />
				</province>
				<province label="北京市">
					<city label="朝阳区" />
					<city label="东城区" />
				</province>
			</mx:XMLList>
		</mx:dataProvider>
	</mx:Tree>
	<mx:Label id="lbCity" x="38" y="32" text="未选择" fontSize="14" width="200"/>
</mx:Application>

 

© 著作权归作者所有

共有 人打赏支持
小强斋太
粉丝 0
博文 181
码字总数 0
作品 0
广州
整合Springboot+Blazdes+Spring+Flex

写在前面: Flex是10年前的产物,基本也要退出历史舞台了,手里有个Flex 项目,最近又在看SpringBoot方面的书,突发奇想,能不能整合一下。由于Flex年代久远,国内相关文献实在是少的可怜。努力...

章大大 ⋅ 06/15 ⋅ 0

Flexible Box 布局与小程序开发

Flexible Box 布局与小程序开发 参考资料: 1.A Complete Guide to Flexbox BY CHRIS COYIER 2.Flex 布局教程:语法篇 3.Flex 布局教程:实例篇 4.A Visual Guide to CSS3 Flexbox Propertie......

坚果jimbowhy ⋅ 05/27 ⋅ 0

flex和box如何使用,flexbox又是什么

display:box; 是老语法,display:flex;是新语法。flexbox是只有ie10才有的特殊语法,ie11可以用flex。 box支持的浏览器更多,flex旧版本浏览器不支持。 flex能让我们轻易的实现 宽度均分、垂...

linsk1998 ⋅ 05/16 ⋅ 0

写给 Android 开发的小程序布局指南,Flex 布局!

一、序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的。 想要开发一款小程序,其实和我们正常写一款 ...

承香墨影 ⋅ 06/12 ⋅ 0

进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear ⋅ 05/29 ⋅ 0

css3最全flex布局结构整理

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左...

韦姣敏 ⋅ 05/03 ⋅ 0

CSS3 display:flex和display:box的区别

display:box; 是老语法,display:flex;是新语法,二者还有以下不同:与子元素 display 方式的相关性不同display:box; 作用下,如果子元素是 block 的,竖着排,如果子元素是 inline、inline-...

莫西摩西 ⋅ 04/26 ⋅ 0

React Native -- Flexbox

1、alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 源码描述 // How to align children in the cross direction// https://developer.mozilla.org/en-US/docs/Web/CSS/ali......

jwzhangjie ⋅ 2015/09/28 ⋅ 0

美国泛达公司:下一代数据中心的光缆布线系统

今的数据中心正在从成本中心演化到利润中心,IT 管理人员必须提高交易速度,使数据中心的使用率达到最高,创造更高的利润。 商业组织无论是从 10G 过渡到 40G/50G/100G 以太网,还是从 8G 光纤...

玄学酱 ⋅ 05/18 ⋅ 0

vertical-align,dispaly:table-cell | table | flex

一、vertical-align 定义:设置元素(img,input这种类型的元素) 或者元素下面的文本元素(div,span。。。)的垂直对齐方式。 但是 其 只对 一些特定显示样式(例如 单元格显示方式:table-cel...

zwjjap ⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 31分钟前 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 48分钟前 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

【转】JS浮点数运算Bug的解决办法

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎...

NickSoki ⋅ 今天 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 今天 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 今天 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 9

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部