目录
一 列表布局 ListView
Flutter
中可以通过
ListView
来定义列表项,支持垂直和水平方向展示。
通过一个属性就可以控制列表的显示方向。列表有以下分类:
1
、垂直列表
2
、垂直图文列表
3
、水平列表
4
、动态列表
ListView列表组件常用参数
scrollDirection
名称 | 类型 | 说明 |
scrollDirection | Axis | Axis.horizontal水平列表 Axis.vertical垂直列表 |
padding | EdgeInsetsGeometry | 内边距 |
resolve | bool | 组件反向排序 |
children | List | 列表元 |
动态列表实现
void main(List<String> args) {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("title")),
body: MyApp(),
),
));
}
class MyApp extends StatelessWidget {
List list = [];
MyApp({super.key}) {
print(listData);
for (var i = 0; i < 20; i++) {
list.add("我是第${i}条数据");
}
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: list.length,
itemBuilder: (context, index){
return ListTile(
title: Text("${list[index]}"),
);
},);
}
}
二 GridView网格布局组件
当让可以滚动的元素使用矩阵方式排列的时 候。此时我们可以用网格列表组件GridView实现布局。 GridView创建网格列表主要有下面三种方式
1
、可以通过
GridView.count
实现网格布局
2
、可以通过
GridView.extent
实现网格布局
3
、通过
GridView.builder
实现动态网格布局
名称 | 类型 | 说明 |
scrollDirection | Axis | 滚动方法 |
padding | EdgeInsetsGeometry | 内边距 |
resolve | bool | 组件反向排序 |
crossAxisSpacing | double | 水平子Widget之间间距 |
mainAxisSpacing | double |
垂直子
Widget
之间间
距
|
crossAxisCount | int |
用在
GridView.count
一行的
Widget
数量
|
maxCrossAxisExtent | double |
用在
GridView.extent
横轴子元素的最大长度
|
childAspectRatio | double | 子Widget宽高比例 |
children | [ ] | |
gridDelegate |
SliverGridDelegateWithFixedCrossAxisCount
SliverGridDelegateWithMaxCrossAxisExtent
|
控制布局主要用在 GridView.builder里面
|