第二百二十四回

我们在上一章回中介绍了"自定义TimePicker"相关的内容，本章回中将介绍滚动布局的使用示例.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的滚动布局和Android原生开发中的ScrollView组件类似，当屏幕中的内容多到无法通过一个屏幕完整显示时，它可以滚动显示这些内容。在Flutter
中没有单独的滚动组件，而是通过ListView相关的组件来表示滚动布局，这些相关的组件有GridView,SliverList。本章回中将以ListView为例来介绍滚动布局。

2. 使用方法

我们使用Stack组件来做为页面的布局，它可以分成多行内容，具体的切分方法我们会在后面的章节中介绍，本章回中的滚动布局只是其中的一行，因此它是一种局部的
滚动布局。下面是实现滚动布局的具体方法：- 使用Positioned组件来限定滚动布局所在的区域范围；

• 在Positioned组件内包裹一个ListView组件，通过ListView组件实现滚动功能；
• 在ListView组件内创建滚动的内容，可以使用其它的组件来实现；
  该方法的实现比较简单，就是一层层地嵌套，主要是这种掌握这种嵌套的思路。此外，本实现方法中的ListView可以使用其它具有滚动功能的组件替换，比如GridView
  SliverList组件。本方法实现的是一个局部的滚动布局，主要是通过Positioned来限制局部范围，也可以去掉这个限制让整个页面中的内容都可以滚动。

3. 代码与效果

3.1 示例代码

child: Stack(
  children: [
    ///第二行内容： 这是一个滚动组件，滚动的区域通过Positioned指定
    Positioned(
      top: row2Height,
      width: screenWidth - padding*2,
      height: row3Height - row2Height,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.greenAccent,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Center(
          child:ListView(
            ///最好去掉List中的间距，不无法滚动到滚动区域的边缘
            padding: EdgeInsets.zero,
            itemExtent:32,
            children: List.generate(18, (index) {
              ///列表中的内容是一个文本和分隔线
              return Column(
                children: [
                  Container(
                    color: Colors.yellow,
                    child: Text("item: $index"),
                  ),
                  const Divider(height: 2,color: Colors.white,),
                ],
              );
            }),
          ),
        ),
      ),
    ),
  ],
),

上面的示例代码完全按照实现方法中的步骤来编写，我们在代码中的关键位置添加了注释，方便大家理解代码。此外，我们在滚动组件外层加了个容器，主要用来实现圆角
功能，滚动内容是一个文本和分隔线。这两个内容不是固定的，大家可以依据自身项目需求来修改。代码中还有一个细节需要说明：最好去掉滚动组件的边距，不然滚动
组件中的内容无法滚动到区域边缘，影响外观效果。

3.2 运行效果

编译并且运行上面的代码，可以得到下面的运行效果图，图中绿色区域的内容就是滚动组件，只不过图片是静态的，不能滚动而已。建议大家自己动手实践，这样就可以
滚动绿色区域中的内容，而且可以修改滚动内容中的文本。038

4. 内容总结

最后，我们对本章回中的内容做一个全面的总结：

• 在Flutter中没有单独的滚动组件，可以使用ListView类组件来实现滚动功能；
• 创建滚动布局时可以使用容器类组件来限定滚动布局的范围，也可以不限制范围进而变成全局滚动；
• 实现滚动布局主要利用了ListView组件的滚动功能，布局中滚动的内容可以自行定义；
  看官们，与"滚动布局的使用实例"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!