我无法滚动查看下方的网格视图。这是为什么?我应该改变什么才能使这项工作?请帮忙!!! 提前谢谢你。
Scaffold(
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Text('GridView 1'),
GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
children: List.generate(
9,
(index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
);
},
),
),
Text('GridView 2'),
GridView.builder(
itemCount: list_item.length,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
// width: 150,
// height: 150,
);
},
),
],
),
),
),
);
谢谢你在flutter中帮助我。
它确实有效,只是不是您需要的方式。
问题在于 GridView 本身也是一个可滚动的小部件。因此,当您尝试滚动页面时,它实际上会尝试滚动那些 GridView 而不是 SingleChildScrollView。
要禁用 GridView 滚动功能——您需要再添加一个参数。
GridView.count(
physics: NeverScrollableScrollPhysics(),
...
),
试试这个:
Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[]
多个网格视图可滚动
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('GridView 1'),
Container(
height: 400,
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
primary: false,
children: List.generate(
20,
(index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
);
},
),
),
),
Text('GridView 2'),
Container(
height: 400,
child: GridView.builder(
itemCount: 20,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
// width: 150,
// height: 150,
);
},
),
),
],
),
),
);
发生这种情况是因为您必须将高度指定为
GridView
。
我在这里回答了一个类似的问题: https://stackoverflow.com/a/76192690/11976596
你可以在下面找到相同的-
我有一个类似的问题,我在
GridView.builder
里面有一个SingleChildScrollView
。现在的问题是你不能在 GridView
里面创建一个 SingleChildScrollView
因为两者都会尝试占用尽可能多的可用空间,这使得高度无限/无限。
所以解决方案是用
GridView
包裹SizedBox
,我总是喜欢使用GridView.Builder
。
现在真正的问题是,“当列表是动态的时,我怎么知道
SizedBox
的大小?”
所以我写了这段代码,根据
SizedBox
的
childAspectRatio
属性动态计算
GridView
的高度
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(title: 'Dynamic GridView', home: Home());
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
final double width = MediaQuery.of(context).size.width;
final double height = MediaQuery.of(context).size.height;
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
itemGrid(width),
],
),
),
);
}
Widget itemGrid(double width) {
const int count = 16;
const int itemsPerRow = 2;
const double ratio = 1 / 1;
const double horizontalPadding = 0;
final double calcHeight = ((width / itemsPerRow) - (horizontalPadding)) *
(count / itemsPerRow).ceil() *
(1 / ratio);
return SizedBox(
width: width,
height: calcHeight,
child: GridView.builder(
padding: const EdgeInsets.symmetric(horizontal: horizontalPadding),
itemCount: count,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 0,
crossAxisSpacing: 0,
crossAxisCount: itemsPerRow,
childAspectRatio: ratio),
itemBuilder: (context, index) {
return SizedBox(
child: Card(
clipBehavior: Clip.hardEdge,
child: Column(
children: [
Expanded(
child: Image.network(
"https://picsum.photos/200?${DateTime.now().millisecondsSinceEpoch.toString()}")),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Text(
"Lorem Ipsum is a dummy text, lorem ipsum",
maxLines: 3,
overflow: TextOverflow.ellipsis,
style:
TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
textAlign: TextAlign.start,
),
),
],
),
),
);
},
),
);
}
}
链接到 Dart 要点 - https://dartpad.dev/?id=05ba8804b19a2978a087c68622000a01
说明
count
是项目总数或itemCount
.itemsPerRow
是连续的项目数或 crossAxisCount
.ratio
是 childAspectRatio
的 GridView
属性,通常用于设置网格内项目的大小。 ratio
计算为宽度/高度。horizontalPadding
是给GridView
的水平填充(在垂直列表的情况下)calcHeight
是 SizedBox
的计算高度,因此您不需要在动态列表的情况下给出固定高度。