Flutter第五弹:Flutter布局

时间:2024-03-21 14:27:56

目标:

1)Flutter常用的布局容器小组件有哪些?

2)Flutter列表组件的小例子。

一、Flutter常用的容器组件

1.1 Container组件

Container 部件有许多可用的属性,以下是一些常用的属性:

属性 说明
alignment 设置子部件在 Container 内的对齐方式
padding 设置 Container 的内边距
margin 设置 Container 的外边距
color 设置 Container 的背景颜色
width 设置 Container 的宽度
height 设置 Container 的高度
decoration 设置 Container 的装饰,如边框、圆角、阴影等

通过灵活使用这些属性,你可以轻松地定制和调整 Container 的外观和布局。

1. alignment对齐属性

通过 alignment 属性,你可以指定 Container 内部子部件的对齐方式。

对齐方式 说明
Alignment.topLeft 将子部件对齐到 Container 的左上角
Alignment.center 将子部件居中对齐到 Container
Alignment.bottomRight 将子部件对齐到 Container 的右下角

2. Container 的边距和填充

通过 padding 属性,你可以设置 Container 的内边距,从而控制子部件与 Container 之间的间距。而 margin 属性则用于设置 Container 的外边距,控制 Container 与其它部件之间的间距。与View的边距类似。这些属性可以接受 EdgeInsets 类的实例,方便你灵活地调整边距和填充。

3. 装饰和样式

Container 的 decoration 属性可以让你为 Container 添加装饰,如边框、圆角和阴影等效果。你可以使用 BoxDecoration 类的实例来定义 Container 的装饰效果。

color定义容器的背景色。

4. 大小和调整

width定义宽度,height定义高度。