Flutter滚动组件_flutter 滚动组件

ListView

ListView 是滚动组件，常用组件之一，用于展示大量数据的列表。

定义列表子项的样式

class ListItem extends StatelessWidget {
  final String title;
  const ListItem({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      color: const Color(0x00000ddd),
      child: Container(
        height: 40,
        alignment: Alignment.center,
        child: Text(
          title,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

直接加载列表

return ListView(
  children: const [
    ListItem(title: "列表项1"),
    ListItem(title: "列表项2"),
    ListItem(title: "列表项3")
  ],
);
1
2
3
4
5
6
7

GridView

GridView是一个网格布局组件

class _YcHomeBodyState extends State<YcHomeBody> {
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          // 设置只能显示3列，列直接间距是20，行间距是10
          crossAxisCount: 3,
          mainAxisSpacing: 10,
          crossAxisSpacing:20
      ),
      children: [
        _gridViewItem(
            Colors.primaries[0]), // Colors.primaries[0] 是一个预定义的颜色列表，包含了一组基本的颜色
        _gridViewItem(Colors.primaries[1]),
        _gridViewItem(Colors.primaries[2]),
        _gridViewItem(Colors.primaries[3]),
        _gridViewItem(Colors.primaries[4]),
      ],
    );
  }

  _gridViewItem(Color color) {
    return Container(height: 50, color: color);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

快速构建

GridView.builder

class _YcHomeBodyState extends State<YcHomeBody> {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10), //每行最多显示3个，间距是10
      itemBuilder: (context, index) {
        // 子项的构造函数
        return Container(
            height: 50,
            color: Colors.primaries[index % Colors.primaries.length]);
      },
      itemCount: 10, // 子项的个数
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

GridView.count

class _YcHomeBodyState extends State<YcHomeBody> {
  @override
  Widget build(BuildContext context) {
    return GridView.count(crossAxisCount: 3, children: List.generate(10, (i) {
      return Container(
          height: 30,
          color: Colors.primaries[i % Colors.primaries.length],
          margin: const EdgeInsets.all(10)
      );
    })
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

PageView

PageView是一个可以滚动的视图，通常用来实现类似于轮播图或者滑动切换页面的效果

滑动切换页面

class _YcHomeBodyState extends State<YcHomeBody> {
  int _currentPageIndex = 0;
  final PageController _pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
            flex: 9,
            child: PageView(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _currentPageIndex = index;
                });
              },
              children: const [
                Center(
                  child: Text('Page 1'),
                ),
                Center(
                  child: Text('Page 2'),
                ),
              ],
            )),
        Expanded(
            flex: 1,
            child: Container(
              color: Colors.white70,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentPageIndex = 0;
                      });
                      _pageController.animateToPage(_currentPageIndex,
                          duration: const Duration(milliseconds: 500),
                          curve: Curves.easeInOut);
                    },
                    child: Icon(
                      Icons.home,
                      color: _currentPageIndex == 0 ? Colors.blue : Colors.grey,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentPageIndex = 1;
                      });
                      _pageController.animateToPage(_currentPageIndex,
                          duration: const Duration(milliseconds: 500),
                          curve: Curves.easeInOut);
                    },
                    child: Icon(
                      Icons.person,
                      color: _currentPageIndex == 1 ? Colors.blue : Colors.grey,
                    ),
                  ),
                ],
              ),
            ))
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

DataTable

DataTable控件显示表格数据，DataTable需要设置行和列

return Center(
      child: DataTable(
        border: TableBorder.all(color: Colors.blue),
        // 列
        columns: const [
          DataColumn(label: Text('姓名')),
          DataColumn(label: Text('年龄'))
        ],
        //行
        rows: const [
          DataRow(cells: [
            DataCell(Text('张三')),
            DataCell(Text('15')),
          ]),
          DataRow(cells: [
            DataCell(Text('李四')),
            DataCell(Text('15')),
          ]),
        ],
      ),
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其他内容略。