Flutter 列表组件ListView 网格布局组件GridView

目录

一 列表布局ListView

二 GridView网格布局组件

一 列表布局 ListView

动态列表实现

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创建网格列表主要有下面三种方式