Flutter 入门指北之滑动部件（超详细）

码个蛋(codeegg)第 603 次推文

前言

Flutter系列文章:

《Flutter 入门指北(Part 1)之 Dart》

《Flutter 入门指北(Part 2)之基础部件》

《Flutter 入门指北(Part 3)之 Appbar，Scaffold 填坑》

《Flutter 入门指北(Part 4)之容器部件》

《Flutter 入门指北(Part 5)之输入处理及实战》

《Flutter 入门指北(Part 6) 之路由》

前面的小节基本上讲完了常用的部件和容器部件，也可以完成很多的界面，但是又一个问题，假如我们要显示一段文字，比如将 一段又臭又长的文字 在界面上显示 1000 次，不难完成吧

// ..省略一些无关代码
body: Text('一段又臭又长的文字' * 1000, softWrap: true)

很简单，运行到手机...「诶诶诶，**，怎么只显示了一部分，剩下的怎么画不下去」

日常开发中，会遇到很多这种情况，许多界面不是一页就能够显示完的。那么这里提下可滑动的容器部件

SingleChildScrollView

这个部件非常简单，不贴源码了。最简单的使用方式只需要提供一个 child 即可。现在给前面写的 Text 包裹上一层 SingleChildScrollView 然后再运行，文字全部都展示出来了。

如果需要实现一个垂直的滚动列表，可以直接通过 SingleChildScrollView 包裹 Column 来实现，列表内容全部塞到 Column 即可

class SingleChildScrollDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// letters 自由发挥吧...一定要大量，大量，大量
    List<String> letters = [......];


    return Scaffold(
      appBar: AppBar(
        title: Text('Single Child Demo'),
      ),
      body: SingleChildScrollView(
          child: Center(
        child: Column(
          children: List.generate(
              letters.length,
              (index) => Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4.0),
                    child: Text(letters[index], style: TextStyle(fontSize: 18.0)),
                  )),
        ),
      )),
    );
  }
}

运行结果会根据你的 letters 不同而不同，这边就不贴效果图了，反正你可以看到一串列表...

那么如果需要实现横向滚动列表呢，稍稍做下修改就行了

body: SingleChildScrollView(
    // 设置滚动方向
    scrollDirection: Axis.horizontal,
    child: Center(
      // 修改为 `Row` 即可
      child: Row(
        children: List.generate(
            letters.length,
            // 如果你的 letters 数量比较少，推荐加个 `Container` 把宽度指定大点
            (index) => Container(
                child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 6.0),
                    child: Text(letters[index], style: TextStyle(fontSize: 18.0)),
                    ),
                    width: 30.0)),
      ),
    ))

效果图也不贴了，都比较简单。

该部分代码查看 single_child_scroll_main.dart 文件*

ListView

平时开发 Android 的时候，如果有相同格式的列表要实现，一般会使用 ListView 或者 RecyclerView 来实现，Flutter 也提供了类似的部件 ListView

实现 ListView 的方法主要有

通过 ListView 设置 children 属性实现

通过 ListView.custom 实现

通过 ListView.builder 实现

通过 ListView.separated 实现带分割线列表

ListVie