白日放歌须纵酒,青春作伴好还乡。这篇文章主要讲述Flutter 专题27 图解 ListView/GridView 混用时滑动冲突小尝试 #yyds干货盘点#相关的知识,希望能为你提供帮助。
【Flutter 专题27 图解 ListView/GridView 混用时滑动冲突小尝试 #yyds干货盘点#】
小菜在学习过程中会在一个 Page 页面同时用到 GridView 和 ListView 或多个 ListView,此时就会遇到常见的滑动冲突问题。小菜尝试了两种解决滑动冲突的方案,仅记录一下基本的使用方式。小菜翻译很不到位,可重点看代码。
尝试一:CustomScrollView + sliver
Flutter 提供了类似于 Android CollapsingToolbarLayout 的折叠效果,小菜借此了解到 CustomScrollView 这个组件,可以解决列表的滑动冲突。
CustomScrollView 允许包含多种滚动模型,例如列表/网格和扩展标题。但其子 Widget 必须为 sliver 类型的。
sliver 代表具有特定滚动效果的滚动模型,sliver 本身不包含滚动交互模型,需要通过 CustomScrollView 连接为一个整体。sliver 有众多具体的 Widget,小菜也在尝试过程中。
文章图片
class _ScrollPageState extends State<
ScrollPage3>
{
List<
int>
gridData = https://www.songbingjia.com/android/List<
int>
();
_setGridData() {
for (int i = 0;
i <
15;
i++) {
gridData.add(i);
}
}@override
void initState() {
_setGridData();
}@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text(方案一)), body: _bodyWid());
}Widget _bodyWid() {
return CustomScrollView(slivers: <
Widget>
[
SliverList(
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return _typeTitleWid(热门分类);
}, childCount: 1)),
SliverPadding(padding: const EdgeInsets.all(8.0), sliver: _typeGridWid()),
SliverList(
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return _typeTitleWid(智能推荐);
}, childCount: 1)),
_typeListWid()
]);
}Widget _typeTitleWid(var titleStr) {
return Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <
Widget>
[
Padding( padding: EdgeInsets.all(10.0),
child: Text(titleStr,
style:
TextStyle(color: Color(0xFF808080), fontSize: 14.0))),
Divider(color: Color(0xFF808080), height: 0.5)
]));
}Widget _typeGridWid() {
return SliverGrid(
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0, childAspectRatio: 4.0),
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return Container( height: 64.0,
decoration: BoxDecoration(
color: Colors.grey, borderRadius: BorderRadius.circular(3.0)),
child: Center(
child: Text(分类 ${(index + 1)}, style: TextStyle(color: Color(0xFF333333), fontSize: 14.0))));
}, childCount: gridData.length));
}Widget _typeListWid() {
return SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <
Widget>
[
Padding(
padding: EdgeInsets.all(10.0),
child: Text(推荐精彩内容 ${(index + 1)},
textAlign: TextAlign.left,
style: TextStyle(
color: Color(0xFF333333), fontSize: 15.0))),
Padding(
padding: EdgeInsets.only(top: 4.0),
child: Divider(color: Color(0xFF808080), height: 0.5))
]));
}, childCount: gridData.length));
}
}
尝试二:primary + shrinkWrap
小菜在使用 ListView 或 GridView 时发现有两个属性很重要。小菜的翻译很不到位,建议大家仔细阅读一下官网的介绍。
shrinkWrap 常用于内容大小不确定情况,如果滚动视图(ListView/GridView/ScrollView 等)没有收缩包装,则滚动视图将扩展到允许的最大大小。如果是无界约束,则 shrinkWrap 必须为 true。
primary 如果为 true,即使滚动视图没有足够的内容来支撑滚动,滚动视图也是可滚动的。否则,默认为 false 情况下,只有具有足够内容的用户才能滚动视图。
文章图片
class _ScrollPageState extends State<
ScrollPage3>
{@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text(方案二)), body: _bodyWid2());
}Widget _typeGridWid2() {
return GridView.count(
primary: false,
shrinkWrap: true,
crossAxisCount: 4,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
childAspectRatio: 4.0,
padding: EdgeInsets.all(10.0),
children: gridData.map((int index) {
return Container(
height: 64.0,
decoration: BoxDecoration(
color: Colors.grey, borderRadius: BorderRadius.circular(3.0)),
child: Center(
child: Text(分类 ${(index + 1)},
style: TextStyle(
color: Color(0xFF333333), fontSize: 14.0))));
}).toList());
}Widget _typeListWid2() {
return ListView.separated(
primary: false,
shrinkWrap: true,
itemCount: gridData.length,
separatorBuilder: (BuildContext context, int index) =>
new Divider(),
itemBuilder: (context, item) {
return Padding(
padding: EdgeInsets.all(12.0),
child: Text(推荐精彩内容 ${(item + 1)},
style: TextStyle(color: Color(0xFF333333), fontSize: 15.0)));
});
}Widget _bodyWid2() {
return ListView(children: <
Widget>
[
_typeTitleWid(热门分类),
_typeGridWid2(),
_typeTitleWid(智能推荐),
_typeListWid2()
]);
}
}
小菜的学习还很不到位,如果有不对的地方还希望多多指出。
推荐阅读
- #星光计划2.0# OpenHarmony 源码解析之JavaScriptAPI NAPI-C接口
- 新上传的WordPress主题未在网络服务器中显示
- 将Bootstrap模板转换为WordPress模板后导航Toggler崩溃不起作用
- 需要帮助将按钮链接到WordPress主题定制器中的功能
- WordPress中自定义帖子类型的”嵌套”
- 我的WordPress主题style.css覆盖管理主题
- 我的wordpress主页没有显示正确的标题
- Chrome和Safari忽略了导航栏高度
- 必须删除Chrome中的缓存,才能查看我在WordPress wesbite上所做的CSS更改。可以自动处理吗()