flutter - 带有滑块颤动的网格视图
问题描述
我需要创建一个垂直滚动的网格视图。我怎样才能实现它我已经创建了一个网格但我不能让它可滚动?
我已经尝试添加垂直滚动,但它不起作用请帮助实现这一点
这是网格视图代码
GridView.count(
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
primary: false,
childAspectRatio: 1.1,
shrinkWrap: true,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 4,
// mainAxisCount:2,
//scrollDirection: Axis.horizontal,
children: List.generate(categoryData.length, (index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductCategoryPage(
categoryId: categoryData[index].id,
categoryName:
categoryData[index].name)));
},
child: Column(children: [
buildCacheNetworkImage(
width: 40,
height: 40,
url: categoryData[index].image,
plColor: Colors.transparent),
Flexible(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Text(
categoryData[index].name,
style: TextStyle(
color: CHARCOAL,
fontWeight: FontWeight.normal,
fontSize: 12,
),
textAlign: TextAlign.center,
),
),
)
]));
}),
),
我需要如何实现的是
解决方案
把你包装GridView
成一个SingleChildScrollView
并添加 physics: ScrollPhysics()
到你的GridView.count()
SingleChildScrollView(
child: GridView.count(
physics: ScrollPhysics(),
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
primary: false,
childAspectRatio: 1.1,
shrinkWrap: true,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 4,
// mainAxisCount:2,
//scrollDirection: Axis.horizontal,
children: List.generate(categoryData.length, (index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductCategoryPage(
categoryId: categoryData[index].id,
categoryName:
categoryData[index].name)));
},
child: Column(children: [
buildCacheNetworkImage(
width: 40,
height: 40,
url: categoryData[index].image,
plColor: Colors.transparent),
Flexible(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Text(
categoryData[index].name,
style: TextStyle(
color: CHARCOAL,
fontWeight: FontWeight.normal,
fontSize: 12,
),
textAlign: TextAlign.center,
),
),
)
]));
}),
),
)
推荐阅读
- odoo-13 - Odoo13:mrp 工单
- node.js - 使用 Node.js 套接字代码提交的 FTP 命令未处理
- powershell - 使用 power shell 自动配置 ssrs
- cpanel - 是否可以通过 cpanle 在共享主机上安装 adobe connect?
- python - Python:将可选参数装饰器作为类实现
- python - Pandas中的Groupby ID并获取另一列中最新日期和值大于0的行
- javascript - 如何在反应js中将值从一个组件传递到另一个组件
- javascript - 遍历两个对象数组并创建新的数组对象
- rpmbuild - 如何构建安装主机相关文件的 rpm
- python - 为键附加多个值