问题描述
我有这个代码,我正在尝试使这个 gridview 可滚动,无论我做什么,它都不会滚动。我不断收到此渲染溢出错误。我试图将它包裹在 SingleChildScroll 视图和 Physics: ScrollPhysics() 的属性中,但没有任何效果。我只需要使这个 gridView 可滚动,而不是它下面的文本。我已经尝试了几种方法,但到目前为止没有任何方法适用于它。可能是我在这里做的一个愚蠢的错误,但无法弄清楚。 编辑:当我在脚手架的 body 标记之后设置 singleChildScrollView 时它工作正常,但当我将它应用到 GridView 时不起作用。
class _CartGridViewState extends State<CartGridView> {
@override
Widget build(BuildContext context) {
final User user = FirebaseAuth.instance.currentUser;
double sum = 0;
print(user);
return StreamBuilder(
stream: FirebaseFirestore.instance
.collection('Users')
.doc(user.uid)
.collection('Cart')
.snapshots(),builder: (BuildContext context,snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),);
}
var document = snapshot.data.docs;
return Padding(
padding: const EdgeInsets.all(10.0),child: SingleChildScrollView(
physics: ScrollPhysics(),child: GridView.builder(
physics: ScrollPhysics(),scrollDirection: Axis.vertical,primary: false,shrinkWrap: true,itemCount: document.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,childAspectRatio: MediaQuery.of(context).size.height / 800,),itemBuilder: (context,index) {
if (document[index].data()["name"] == null) {
return Text('There are $index items in cart');
} else {
return Card(
child: GestureDetector(
onTap: () {
Navigator.push(
context,MaterialPageRoute(
builder: (context) => CartView(
document[index].data()["name"],document[index]
.data()["price"]
.todouble(),document[index].data()["image"],index,)),);
},child: Stack(children: [
ListView(physics: ScrollPhysics(),children: [
Hero(
tag: 'tagImage$index',child: Image.network(
"${document[index].data()["image"]}",height: 150,Center(
child: Text(
"Price ${document[index].data()["price"]}")),]),DeleteCartItems(index),);
}
}),);
},);
}
}
解决方法
我们可以利用 Expanded widget 来获得可滚动的 GridView 请参考以下代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: MyHomePage(title: 'Flutter Demo Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> images = [
"https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60","https://images.unsplash.com/photo-1614961234425-dedd96e5e699?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60",];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),body: Padding(
padding: EdgeInsets.symmetric(
horizontal: 12.0,child: Expanded(
child: GridView.builder(
itemCount: images.length,shrinkWrap: true,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,crossAxisSpacing: 8.0,mainAxisSpacing: 10.0),itemBuilder: (BuildContext context,int index) {
return Image.network(images[index]);
},);
}
}