04. 布局组件详解 – 前端知识圈

ListView 列表组件

名称	作用	类型
scrollDirection	Axis.horizntal 水平列表 Axis.vertical 垂直列表	Axis
padding	内边距	EdgeInsetsGeometry
resolve	反向排序	bool
children	子集	List

ListView(
    scrollDirection:Axis.horizntal，
    children:[
        ListTile(text: const Text("hello flutter")),
        ListTile(text: const Text("hello flutter")),
        ListTile(text: const Text("hello flutter")),
        ListTile(text: const Text("hello flutter")),
        ListTile(text: const Text("hello flutter")),
    ]
)

动态渲染列表

List list = ["hello flutter","hello dart"]
ListView.builder(
    itemCount:list.length,
    itenBuilder:(context,index){
        return ListTile(title:Text("${list[index]}"))
    }
)

GridView 网格布局组件

快速实现 宫格式 布局

名称	说明	类型
scrollDirection	滚动方式	Axis
padding	内边距	EdgeInsetsGeometry
resolve	数组翻转	bool
crossAxisSpacing	水平间距	double
mainAxisSpacing	垂直间距	double
maxCrossAxisExtent	横轴的最大长度	用在GridView.extent
childAspectRatio	宽高比	double
children	子集	List
shrinkWrap	完全支配子元素高度	bool

GridView.count

横轴固定数量的布局

GridView.count(
    crossAxisCount:3,
    children:[
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
    ]
)

GridView.extent

横轴的最大长度

GridView.extent(
    maxCrossAxisExtent:2,
    children:[
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
        Icon(Icons.add),
    ]
)

GridView.builder

动态渲染 GridView 列表

List list = ["hello flutter","hello dart"];
GridView.builder(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子 Widget 之间间距
        mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
        crossAxisCount: 2, //一行的 Widget 数量
    ),
    itemCount:list.length,
    itemBuilder:(context,index){
        return Text("${list[index]}")
    }
)

padding 内边距组件

包裹的子元素可以带有 padding 的边距

属性	作用	类型
padding	内边距 ( 必填 )	EdgeInsets.fromLTRB(left, top, right, bottom)
child	子组件	Widget

Padding(
    padding:EdgeInsets.fromLTRB(0, 0, 0, 0),
    child:const Text("hello world")
)

Row 和 Column 线性布局

类似于 css 的 flex 思想

Row 水平布局

属性	作用	类型
mainAxisAlignment	主轴对齐方式	MainAxisAlignment
crossAxisAlignment	次轴的对齐方式	CrossAxisAlignment
children	子组件集合	[<widget>]

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    chldren:[]
)

Column 水平布局

属性	作用	类型
mainAxisAlignment	主轴对齐方式	MainAxisAlignment
crossAxisAlignment	次轴的对齐方式	CrossAxisAlignment
children	子组件集合	[<widget>]

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    chldren:[]
)

Flex 布局

思想完全和 css 中的 Flex 相同, 只不过在 Flutter 中大部分使用 Row 和 Column 搭配 Expanded 实现

水平布局

Flex(
	direction:Axis.horizontal,
    children:[]
)

垂直布局

Flex(
	direction:Axis.vertical,
    children:[]
)

Expanded 容器分配组件

主要用于容器内部的填充分配, 组件内部可以用 flex 属性, flex 的用法和思想同 css 的 Flex 的 flex 属性 , 可以在 row \ column 和 flex 组件中使用.

Row(
	children:[
        Expanded(
        	flex:1,
            child:<widget>
        )
    ]
)

定位布局 Stack

stack 类似于 css 中的粘性定位, 可以搭配 Align 和 positiond 来实现页面的定位

stack 会填充上级元素的宽高, 如果为全局则全屏填充

属性	作用	类别
aligment	显示位置	Alignment
children	子类的集合	[<widget>]

Stack(
    alignment: Alignment.center,
    children:[]
)

Align 对齐组件

在其元素的所有子元素都会继承Align的属性

属性	作用	类型
alignment	显示位置	Alignment
child	子组件	<widget>

Align(
	alignment: Alignment.center,
    child:<widget>
)

AspectRatio 宽高比

会调整子元素的宽高比

属性	作用	类型
aspectRatio	宽高比	int / int
child	自组件	<widget>

AspectRatio(
	aspectRatio: 2/1 ,// 表示高是宽的一半
    child:
)

card 卡片组件（带阴影的盒子）

属性	作用	类型
margin	外边距	EdgeInsets.all(int)
child	子组件	<widget>
elevation	阴影的深度
color	背景颜色
shadowColor	阴影颜色
clipBehavior	内容溢出裁剪
shape	阴影效果的样式	RoundedRectangleBorder

Card(
    margin:EdgeInsets.all(10),
    color:Colors.red,
	child:<widget>
)