第二百二十四回
2023-12-23 23:53:49
我们在上一章回中介绍了"自定义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组件的滚动功能,布局中滚动的内容可以自行定义;
看官们,与"滚动布局的使用实例"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
文章来源:https://blog.csdn.net/talk_8/article/details/135174053
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!