第二百二十五回

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

你可能感兴趣的:(一起Talk,Flutter吧,前端,移动开发Flutter)