Flutter Day03 - 常用滚动组件笔记#

1. SingleChildScrollView#

1.1 组件作用#

让单个子组件具备滚动能力。
常见搭配是 Column，用于承载一组内容块。

1.2 适用场景#

长表单。
设置页。
内容总量不大但高度不固定的页面。

1.3 特点#

子节点会一次性渲染完成。
代码简单，适合中小体量内容。
数据量很大时性能不如 ListView.builder。

1.4 代码引用（你的示例）#

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(const MySingleChildScrollView());
5
}
6

7
class MySingleChildScrollView extends StatefulWidget {
8
  const MySingleChildScrollView({super.key});
9

10
  @override
11
  State<MySingleChildScrollView> createState() =>
12
      _MySingleChildScrollViewState();
13
}
14

15
class _MySingleChildScrollViewState extends State<MySingleChildScrollView> {
16
  ScrollController _scrollController = ScrollController();
17

18
  @override
19
  Widget build(BuildContext context) {
20
    return MaterialApp(
21
      home: Scaffold(
22
        appBar: AppBar(title: const Text('SingleChildScrollView')),
23
        body: Stack(
24
          children: [
25
            SingleChildScrollView(
26
              controller: _scrollController,
27
              padding: const EdgeInsets.all(20),
28
              child: Column(
29
                children: List.generate(100, (index) {
30
                  return Container(
31
                    margin: const EdgeInsets.only(top: 10),
32
                    alignment: Alignment.center,
33
                    width: double.infinity,
34
                    height: 100,
35
                    color: Colors.blue,
36
                    child: Text(
37
                      "Item $index",
38
                      style: const TextStyle(color: Colors.white, fontSize: 20),
39
                    ),
40
                  );
41
                }),
42
              ),
43
            ),
44
            Positioned(
45
              bottom: 20,
46
              right: 20,
47
              child: GestureDetector(
48
                onTap: () {
49
                  _scrollController.animateTo(
50
                    _scrollController.position.maxScrollExtent,
51
                    duration: const Duration(seconds: 1),
52
                    curve: Curves.easeInOut,
53
                  );
54
                },
55
                child: Container(
56
                  height: 80,
57
                  width: 80,
58
                  decoration: BoxDecoration(
59
                    color: Colors.red,
60
                    borderRadius: BorderRadius.circular(40),
61
                  ),
62
                  alignment: Alignment.center,
63
                  child: const Text(
64
                    "跳转底部",
65
                    style: TextStyle(color: Colors.white, fontSize: 16),
66
                  ),
67
                ),
68
              ),
69
            ),
70
            Positioned(
71
              top: 20,
72
              right: 20,
73
              child: GestureDetector(
74
                onTap: () {
75
                  _scrollController.animateTo(
76
                    _scrollController.position.minScrollExtent,
77
                    duration: const Duration(seconds: 1),
78
                    curve: Curves.easeInOut,
79
                  );
80
                },
81
                child: Container(
82
                  height: 80,
83
                  width: 80,
84
                  decoration: BoxDecoration(
85
                    color: Colors.red,
86
                    borderRadius: BorderRadius.circular(40),
87
                  ),
88
                  alignment: Alignment.center,
89
                  child: const Text(
90
                    "跳转顶部",
91
                    style: TextStyle(color: Colors.white, fontSize: 16),
92
                  ),
93
                ),
94
              ),
95
            ),
96
          ],
97
        ),
98
      ),
99
    );
100
  }
101
}

1.5 关键点总结#

ScrollController 可控制滚动位置。
animateTo 有动画，jumpTo 无动画。
Stack + Positioned 可以叠加悬浮按钮（顶部/底部跳转）。

1.6 常用属性知识点及应用#

属性	说明	常见应用
`controller`	绑定滚动控制器	点击按钮回到顶部/底部、监听滚动位置
`scrollDirection`	滚动方向，默认纵向	横向图片流可设置为 `Axis.horizontal`
`reverse`	是否反向滚动	聊天列表需要从底部开始时可用
`padding`	内容内边距	页面留白、避免内容贴边
`physics`	滚动行为	使用 `BouncingScrollPhysics` 实现 iOS 弹性效果
`child`	单个子组件	通常放 `Column`、`Form` 等组合内容

应用示例：

1
SingleChildScrollView(
2
  controller: _scrollController,
3
  scrollDirection: Axis.vertical,
4
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
5
  physics: const BouncingScrollPhysics(),
6
  child: Column(
7
    children: const [
8
      Text('表单标题'),
9
      SizedBox(height: 12),
10
      Text('更多内容...'),
11
    ],
12
  ),
13
)

2. ListView.builder#

2.1 组件作用#

构建长列表。
按需渲染可见区域的 item，提高性能。

2.2 适用场景#

数据量较大列表。
列表项结构基本一致。

2.3 代码引用（你的示例）#

1
class MyListView1 extends StatefulWidget {
2
  const MyListView1({super.key});
3

4
  @override
5
  State<MyListView1> createState() => _MyListViewState1();
6
}
7

8
class _MyListViewState1 extends State<MyListView1> {
9
  ScrollController _scrollController = ScrollController();
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return MaterialApp(
14
      home: Scaffold(
15
        appBar: AppBar(title: const Text("ListView.builder")),
16
        body: ListView.builder(
17
          itemCount: 100,
18
          itemBuilder: (BuildContext context, int index) {
19
            return Container(
20
              margin: EdgeInsets.only(top: 10),
21
              alignment: Alignment.center,
22
              width: double.infinity,
23
              height: 100,
24
              color: Colors.blue,
25
              child: Text(
26
                "Item $index",
27
                style: TextStyle(color: Colors.white, fontSize: 20),
28
              ),
29
            );
30
          },
31
          padding: EdgeInsets.all(20),
32
        ),
33
      ),
34
    );
35
  }
36
}

2.4 关键参数#

itemCount: 列表总项数。
itemBuilder: 按索引构建每一项。
padding: 列表内边距。

2.5 常用属性知识点及应用#

属性	说明	常见应用
`itemCount`	列表项数量	避免无限构建，明确数据边界
`itemBuilder`	按索引构建 item	大列表按需渲染，减少内存占用
`controller`	列表滚动控制器	上拉分页、回到顶部、读取偏移量
`scrollDirection`	滚动方向	横向商品卡片列表
`padding`	列表留白	内容布局更美观
`physics`	滚动物理效果	禁止滚动可用 `NeverScrollableScrollPhysics`
`shrinkWrap`	按内容收缩尺寸	嵌套在 `Column` 时常用（注意性能）

应用示例：

1
ListView.builder(
2
  controller: _scrollController,
3
  itemCount: 100,
4
  padding: const EdgeInsets.all(16),
5
  physics: const AlwaysScrollableScrollPhysics(),
6
  itemBuilder: (context, index) {
7
    return ListTile(
8
      title: Text('Item $index'),
9
    );
10
  },
11
)

3. ListView.separated#

3.1 组件作用#

与 ListView.builder 一样按需渲染。
额外提供分割线构建函数。

3.2 适用场景#

需要明确区分 item 与 item 的列表。
例如：订单列表、消息列表、设置分组项。

3.3 代码引用（你的示例）#

1
class MyListView2 extends StatefulWidget {
2
  const MyListView2({super.key});
3

4
  @override
5
  State<MyListView2> createState() => _MyListViewState2();
6
}
7

8
class _MyListViewState2 extends State<MyListView2> {
9
  ScrollController _scrollController = ScrollController();
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return MaterialApp(
14
      home: Scaffold(
15
        appBar: AppBar(title: const Text("ListView.separated")),
16
        body: ListView.separated(
17
          itemCount: 100,
18
          itemBuilder: (BuildContext context, int index) {
19
            return Container(
20
              alignment: Alignment.center,
21
              width: double.infinity,
22
              height: 100,
23
              color: Colors.blue,
24
              child: Text(
25
                "Item $index",
26
                style: TextStyle(color: Colors.white, fontSize: 20),
27
              ),
28
            );
29
          },
30
          separatorBuilder: (BuildContext context, int index) {
31
            return Container(
32
              height: 1,
33
              color: Colors.grey,
34
            );
35
          },
36
          padding: EdgeInsets.all(20),
37
        ),
38
      ),
39
    );
40
  }
41
}

3.4 关键参数#

itemBuilder: 构建列表项。
separatorBuilder: 构建分割线。
itemCount: 列表项数量。

3.5 常用属性知识点及应用#

属性	说明	常见应用
`itemCount`	item 数量	与后端数据长度保持一致
`itemBuilder`	构建每个列表项	渲染消息、订单、评论等结构化数据
`separatorBuilder`	构建分割区域	分割线、分组间距、时间分隔条
`controller`	滚动控制	无限加载、回滚定位
`padding`	列表内边距	统一页面边距规范
`physics`	滚动行为控制	嵌套滚动时配置更稳定

应用示例：

1
ListView.separated(
2
  itemCount: 20,
3
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
4
  itemBuilder: (context, index) {
5
    return ListTile(
6
      title: Text('消息 $index'),
7
      subtitle: const Text('这是一条消息预览'),
8
    );
9
  },
10
  separatorBuilder: (context, index) {
11
    return const Divider(height: 1);
12
  },
13
)

4. 三种滚动组件对比#

组件	渲染方式	适合场景	优点	注意点
SingleChildScrollView	一次性渲染全部内容	内容不多、结构灵活页面	使用简单	内容太多会影响性能
ListView.builder	按需渲染	长列表、大数据量	性能好	item 结构建议稳定
ListView.separated	按需渲染 + 分隔构建	需要分割线的长列表	结构清晰	分隔线逻辑单独维护

5. 学习小结#

页面内容总量少：优先 SingleChildScrollView。
大数据列表：优先 ListView.builder。
大数据且要分隔效果：优先 ListView.separated。
需要程序化滚动控制时，搭配 ScrollController。