我正在尝试使用
GridView.builder()
方法在我的主页内生成子类别项目的网格。但每次我在主页内使用 GridView.builder 时，所有其他小部件的对齐都会出现问题。
当我评论 GridView.builder 或当我在另一个测试页上使用 GridView.builder 时，它会按预期工作。
我附上了一些屏幕截图，以便您能够理解我在说什么。
此图显示了当我注释掉 GridView.builder 时小部件如何对齐。
当我启用 GridView.builder 时，它会像这样
HomePage() 的代码：
import 'package:flutter/material.dart';
import 'package:foodie_mobile_application/classes/burger_class.dart';
import 'package:foodie_mobile_application/colors.dart';
import 'package:foodie_mobile_application/components/custom_button.dart';
import 'package:foodie_mobile_application/components/main_category_widget.dart';
import 'package:foodie_mobile_application/components/sub_category_custom_gridView.dart';
class HomePage extends StatelessWidget {
HomePage({super.key});
Map mainProductCategories = {
"Burger": ['lib/images/burger_icon.png', '/homePage'],
"Taco" : ['lib/images/taco_icon.png', '/homePage'],
"Chicken" : ['lib/images/turkey_icon.png', '/homePage'],
"Drinks" : ['lib/images/drinks_icon.png', '/introPage'],
};
List<Burger> burgerList = [
Burger(
imageLocation: 'lib/images/beef_burger_image.png',
name: "Beef burger",
price: 5.25,
discountPercentage: 0,
description: "Lorem ipsum",
rating: 4.8,
size: "Medium",
subCategory: "Cheesy Mozarrella"
),
Burger(
imageLocation: 'lib/images/beef_burger_image.png',
name: "Veg burger",
price: 3.25,
discountPercentage: 0,
description: "Lorem ipsum",
rating: 4.3,
size: "Medium",
subCategory: "Cheesy Mozarrella"
),
Burger(
imageLocation: 'lib/images/beef_burger_image.png',
name: "Chicken burger",
price: 4.53,
discountPercentage: 0,
description: "Lorem ipsum",
rating: 4.9,
size: "Medium",
subCategory: "Cheesy Mozarrella"
),
Burger(
imageLocation: 'lib/images/beef_burger_image.png',
name: "Beef burger",
price: 4.51,
discountPercentage: 10,
description: "Lorem ipsum.",
rating: 4.2,
size: "Medium",
subCategory: "Cheesy Mozarrella"
),
Burger(
imageLocation: 'lib/images/beef_burger_image.png',
name: "Beef burger",
price: 3.45,
discountPercentage: 20,
description: "Lorem ipsum.",
rating: 4.0,
size: "Medium",
subCategory: "Cheesy Mozarrella"
),
Burger(
imageLocation: 'lib/images/beef_burger_image.png',
name: "Veg burger",
price: 4.31,
discountPercentage: 0,
description: "Lorem ipsum.",
rating: 4.0,
size: "Medium",
subCategory: "Cheesy Mozarrella"
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
// the app bar of the home page
appBar: AppBar(
leading: GestureDetector(onTap: () {
Navigator.pushNamed(context, '/testPage');
}, child: const Icon(Icons.arrow_left_sharp, color: Colors.black, size: 45,)),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
children: [
Icon(Icons.location_on, color: primaryButtonColorDark,),
const SizedBox(width: 10,),
Text("Colombo, Sri Lanka", style: TextStyle(color: Colors.grey.shade800, fontSize: 17),)
],
),
),
const Icon(Icons.notifications, color: Colors.black,),
],
),
centerTitle: true,
elevation: 0,
backgroundColor: Colors.transparent,
),
//end of the app bar
body: Column(
children: [
// the promo banner stack
Stack(
children: [
// container with the texts of the promotion banner
Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
height: 150,
decoration: BoxDecoration(
boxShadow: [BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 0.1,
offset: const Offset(4, 5)
)],
borderRadius: BorderRadius.circular(12),
color: primaryButtonColor,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// texts
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Text("Get Special Discount", style: TextStyle(color: Colors.white, ),),
const Text("Up to 80%", style: TextStyle(color: Colors.white, fontSize: 25, fontWeight: FontWeight.w800),),
MyButton(buttonText: "Claim voucher", onTap: () {
}, borderRadius: 50,
buttonColor: Colors.white,
buttonTextSize: 15,
buttonTextColor: primaryButtonColor,
padx: 20,
pady: 10,
),
],
),
),
],
),
),
// the other container containing the image over the promo banner
SizedBox(
height: 195,
width: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Image.asset('lib/images/beef_burger_image.png', height: 195,),
],
),
),
// end of the other container containing the image over the promo banner
],
),
// the end of the promo banner stack
// search bar
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Container(
height: 54,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 0,
offset: const Offset(3, 4)
)
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "find your food...",
border: InputBorder.none,
prefixIcon: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset('lib/images/search.png', height: 10, color: Colors.grey,),
)
),
),
),
)
),
// end of search bar
// list view of all the available main food categories
SizedBox(
height: 160,
child: ListView.builder(itemCount: mainProductCategories.length,scrollDirection: Axis.horizontal,itemBuilder: (context, index) {
String product = mainProductCategories.keys.elementAt(index);
List<dynamic> productInfo = mainProductCategories.values.elementAt(index);
return MainCategoryWidget(categoryName: product,imageLocation: productInfo[0],
);
},),
),
// end of main product category list view
// gridview of all the available burgers
GridView.builder(gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemCount: burgerList.length,
itemBuilder: (context, index) {
final Burger = burgerList[index];
return Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: boxShadowColorPrimary,
offset: Offset(4, 4),
blurRadius: 3,
),
]
),
child: Column(
children: [
Image.asset(Burger.imageLocation),
Text(Burger.name),
Text(Burger.rating.toString()),
Text(Burger.price.toString()),
],
),
);
},
),
// end of the grid
],
),
);
}
}
ProductGridView() 的代码
import 'package:flutter/material.dart';
class ProductGridView extends StatelessWidget {
ProductGridView({super.key, required this.productList});
List productList;
@override
Widget build(BuildContext context) {
return GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),itemCount: productList.length, itemBuilder: (context, index) {
final Burger = productList[index];
return Container(
child: Column(
children: [
Text(Burger.name),
Text(Burger.rating.toString()),
Text(Burger.price.toString())
],
),
);
},);
}
}
主要的（）：
import 'package:flutter/material.dart';
import 'package:foodie_mobile_application/pages/home_page.dart';
import 'package:foodie_mobile_application/pages/intro_page.dart';
import 'package:foodie_mobile_application/pages/test_page.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
routes: {
'/homePage':(context) => HomePage(),
'/introPage':(context) => IntroPage(),
'/testPage':(context) => TestPage(),
},
onUnknownRoute: (settings) {
// Handle unknown routes here
return MaterialPageRoute(
builder: (context) => IntroPage(), // Replace with your error page
);
},
// Other MaterialApp configurations
));
我尝试在另一个文件中创建 GridView.builder 并将其链接到 HomePage() 但它不起作用，我什至再次对整个项目进行了编码，仍然没有运气！
通过将其包裹到 来给出您的
GridView.builder高度SizedBox，以便它仅扩展到其高度。