flutter学习----布局

Flutter布局

ListView列表

名称	类型	说明
scrollDirection	Axis	Axis.horizontal、Axis.vertical
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List	列表元素

动态列表

ListView.builder( itemCount:this.list.length, 		itemBuilder:(context,index){ 
      returnListTile( leading:Icon(Icons.phone), 	      	  title:Text("${list[index]}"), 
      ); 
},
);

ListTitle

示例：

ListTile( 
    leading:Icon(Icons.phone), 		              title:Text("ListTitle",style:TextStyle(fontSize:28.0),
    ), 
    subtitle:Text('subTitle'), 
    trailing:Icon(Icons.phone),
),

GridView网格

名称	类型	说明
scrollDirectioin	Axis	滚动方向
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
crossAxisSpacing	double	水平间距
mainAxisSpacing	double	垂直间距
crossAxisCount	int	一行的数量
childAspectRatio	double	子Widge宽高比
children	[]

GridView.count

class LayoutContent extends StatelessWidget{
List<Widget>_getListData(){ vartempList=listData.map((value){ 
    returnContainer( 
        child: Column( 
            children:<Widget>[ 				     Image.network(value["imageUrl"]),  SizedBox(height:12), 
 Text(value["title"],
 textAlign:TextAlign.center,
 style:TextStyle(fontSize:20)), 
  ], 
  ), 
        decoration:BoxDecoration( 
            border:Border.all( 			color:Color.fromRGBO(230,230,230,0.9), 
  width:1.0 ) ),
);
});  
return tempList.toList();
}
@override Widgetbuild(BuildContextcontext){ 
    returnGridView.count( padding:EdgeInsets.all(20), crossAxisCount:2, crossAxisSpacing:20, mainAxisSpacing:20, //childAspectRatio:0.7, children:this._getListData(), ); }

GridView.builder

class LayoutContent extends StatelessWidget{
Widget_getListData(context,index){ 
    returnContainer( 
        child: Column( 
            children:<Widget>[ Image.network(listData[index]["imageUrl"]), SizedBox(height:12), 
Text(
    listData[index]["title"],
    textAlign: TextAlign.center,
    style:TextStyle(fontSize: 20)), 
 ], 
        ), 
        decoration:BoxDecoration( 
            border:Border.all( color:Color.fromRGBO(230,230,230,0.9), 
  width:1.0 ) ),
);
}
	@override 
    Widgetbuild(BuildContextcontext){ returnGridView.builder( 
        itemCount:listData.length, gridDelegate:SliverGridDelegateWithFixedCrossAxisCount( 
            //横轴元素个数 
            crossAxisCount:2, 
            //纵轴间距 
            mainAxisSpacing:20.0, 
            //横轴间距 
            crossAxisSpacing:10.0, 
            //子组件宽高长度比例 
            childAspectRatio:1.0 ), itemBuilder:this._getListData, 
    ); 
}

Padding边距

在html中常见的布局标签都有padding属性，但是Flutter中很多Widget是没有padding属 性。这个时候我们可以用Padding组件处理容器与子元素直接的间距。

属性	类型	说明
padding	EdgeInsetss	边距值
child	widget	子组件

Row水平布局

属性	类型	说明
mainAxisAlignment	MainAxisAlignment	主轴的排序方式
crossAxisAlignment	CrossAxisAlignment	次轴的排序方式
children	[]	组件子元素

Column垂直布局

属性	类型	说明
mainAxisAlignment	MainAxisAlignment	主轴的排序方式
crossAxisAlignment	CrossAxisAlignment	次轴的排序方式
children	[]	组件子元素

Expanded弹性布局

属性	类型	说明
flex	number	元素占整个父Row/Column的比例
child	Widget	子元素

Stack层叠组件

Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合Positiond来实 现页面的定位布局

属性	类型	说明
alignment	Alignment	配置所有元素的显示位置
children	[]Widget	子组件

Stack Align

Stack组件中结合Align组件可以控制每个子元素的显示位置

属性	类型	说明
alignment	Alignment	配置所有子元素的显示位置
child	Widget	子组件

Stack Positioned

Stack组件中结合Positioned组件也可以控制每个子元素的显示位置

属性	类型	说明
top	number	子元素距离顶部的距离
bottom	number	子元素距离底部的距离
left	number	子元素距离左侧的距离
right	number	子元素距离右侧的距离
child	Widget	子组件

AspectRatio宽高比

​ AspectRatio的作用是根据设置调整子元素child的宽高比。
​ AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽 度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。
​ 如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先 适应布局限制条件，而忽略所设置的比率。

属性	类型	说明
aspectRatio	double	宽高比
child	Widget	子组件

Card卡片

属性	类型	说明
margin	EdgeInserts	外边距
child	Widget	子组件
shape	Shape	卡片的阴影效果，默认阴影效果为圆角的长方形边

Wrap流布局

​ Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Row表 现几乎一致。但Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空 间不足时，则向crossAxis上去扩展显示。

属性	说明
direction	主轴的方向，默认水平
alignment	主轴的对方式
spacing	主轴方向上的间距
textDirection	文本方向
verticalDirection	children摆放舒徐，默认是down
runAlignment	run的对齐方式
runSpacing	run的间距