我们在上一章回中介绍了"自定义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组件的滚动功能，布局中滚动的内容可以自行定义；
看官们，与"滚动布局的使用实例"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
