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), 
  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), 
  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的间距