我正在尝试在垂直列表视图中创建这样的布局，水平网格视图：https://i.stack.imgur.com/RyqZZ.png
想要在垂直列表视图中添加水平网格视图。
我尝试使用axis.horizontal 添加gridview，但它给了我尺寸错误
下面是我的代码（想在列表视图的末尾添加一个水平网格视图）：
shrinkWrap: true,
physics: BouncingScrollPhysics(),
children: [
CarouselSlider(
items: imageSliders,
options: CarouselOptions(
viewportFraction: 1.025,
autoPlay: false,
enlargeCenterPage: true,
aspectRatio: 1.5,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imgList.map((url) {
int index = imgList.indexOf(url);
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
border: Border.all(color: systemWideBlueColor, width: 1), //
shape: BoxShape.circle,
color: _current == index
? systemWideBlueColor
: Colors.white,
),
);
}).toList(),
),
//Product title, price and quantity
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Polarised Camera',
style: productNameTextStyle,
),
SizedBox(height: 5,),
Text(
'Lorem Ipsum Lorem Ipsum ',
style: productSubNameTextStyle,
),
SizedBox(height: 5,),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"\$100",
style: productPriceTextStyle,
),
SizedBox(width: 3),
Text(
"\$200",
style: productCutPriceTextStyle,
),
SizedBox(width: 4),
Text(
'50% Off',
style: kSubtitleStyle,
)
],
),
SizedBox(height: 5,),
Text(
'Inclusive of Tax',
style: productSubNameTextStyle,
),
],
),
),
SizedBox (width: 15,),
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 18.0),
child: Container(height: 30,
color: Color(0xFF59A4E9),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('Over 400 available', style: TextStyle(color: Colors.white),),
),
),)
),
],
),
//Product color variant
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Text('Color Variant', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 8.0),
child: GroupButton(
spacing: 5,
isRadio: true,
direction: Axis.horizontal,
onSelected: (index, isSelected) =>
print('$index button is ${isSelected ? 'selected' : 'unselected'}'),
buttons: ["Red","Blue","Green","Yellow"],
selectedButtons: null,
selectedTextStyle: kBasicWhiteTextStyle,
unselectedTextStyle: kBasicSmallTextStyle,
selectedColor: systemWideBlueColor,
unselectedColor: Colors.white,
// selectedBorderColor: Colors.red,
unselectedBorderColor: systemWideBlueColor,
borderRadius: BorderRadius.circular(0.0),
selectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
unselectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
)
),
//Product size variant
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Text('Size', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 8.0),
child: GroupButton(
spacing: 5,
isRadio: true,
direction: Axis.horizontal,
onSelected: (index, isSelected) =>
print('$index button is ${isSelected ? 'selected' : 'unselected'}'),
buttons: ["XXS","S","M","L","XL","XXL"],
selectedButtons: null,
selectedTextStyle: kBasicWhiteTextStyle,
unselectedTextStyle: kBasicSmallTextStyle,
selectedColor: systemWideBlueColor,
unselectedColor: Colors.white,
// selectedBorderColor: Colors.red,
unselectedBorderColor: systemWideBlueColor,
borderRadius: BorderRadius.circular(0.0),
selectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
unselectedShadow: <BoxShadow>[BoxShadow(color: Colors.transparent)],
)
),
//Product Detailed description
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Text('Description', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 14.0, top: 0.0),
child: Container(
child: new DescriptionTextWidget(text: description),
),
),
//Product Customer Reviews
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Text('Customer Reviews', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 8.0),
child: Row(
children: [
Text('4.0', style: kBasicTextStyle,),
SmoothStarRating(
allowHalfRating: false,
onRated: (v) {
},
starCount: 5,
rating: 4,
size: 20.0,
isReadOnly:true,
// filledIconData: Icons.blur_off,
// halfFilledIconData: Icons.blur_on,
color: Color(0xFFFFA217),
borderColor: Color(0xFFFFA217),
spacing:0.0
),
Text('48 reviews', style: kBasicTextStyle,),
],
)
),
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Row(
children: [
Icon(CupertinoIcons.profile_circled),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text('Shivam Shrivastava', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: SmoothStarRating(
allowHalfRating: false,
onRated: (v) {
},
starCount: 5,
rating: 5,
size: 15.0,
isReadOnly:true,
// filledIconData: Icons.blur_off,
// halfFilledIconData: Icons.blur_on,
color: Color(0xFFFFA217),
borderColor: Color(0xFFFFA217),
spacing:0.0
),
),
],
)
),
Padding(
padding: const EdgeInsets.only(left: 54.0, top: 8.0),
child: Text('3 Months Ago', style: kBasicSmallTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 54.0, top: 8.0, right: 8.0),
child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porttitor erat urna pharetra, ipsum. Sed etiam consequat risus aliquam. Amet scelerisque lorem lacus, sapien, ut ornare...', style: kBasicSmallTextStyle,),
),
//Product Customer Reviews
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Row(
children: [
Icon(CupertinoIcons.profile_circled),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text('Shivam Shrivastava', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: SmoothStarRating(
allowHalfRating: false,
onRated: (v) {
},
starCount: 5,
rating: 5,
size: 15.0,
isReadOnly:true,
// filledIconData: Icons.blur_off,
// halfFilledIconData: Icons.blur_on,
color: Color(0xFFFFA217),
borderColor: Color(0xFFFFA217),
spacing:0.0
),
),
],
)
),
Padding(
padding: const EdgeInsets.only(left: 54.0, top: 8.0),
child: Text('3 Months Ago', style: kBasicSmallTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 54.0, top: 8.0, right: 8.0),
child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porttitor erat urna pharetra, ipsum. Sed etiam consequat risus aliquam. Amet scelerisque lorem lacus, sapien, ut ornare...', style: kBasicSmallTextStyle,),
),
//Product Customer Reviews
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 28.0),
child: Row(
children: [
Icon(CupertinoIcons.profile_circled),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text('Shivam Shrivastava', style: kBasicBlueTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: SmoothStarRating(
allowHalfRating: false,
onRated: (v) {
},
starCount: 5,
rating: 5,
size: 15.0,
isReadOnly:true,
// filledIconData: Icons.blur_off,
// halfFilledIconData: Icons.blur_on,
color: Color(0xFFFFA217),
borderColor: Color(0xFFFFA217),
spacing:0.0
),
),
],
)
),
Padding(
padding: const EdgeInsets.only(left: 54.0, top: 8.0),
child: Text('3 Months Ago', style: kBasicSmallTextStyle,),
),
Padding(
padding: const EdgeInsets.only(left: 54.0, top: 8.0, right: 8.0),
child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porttitor erat urna pharetra, ipsum. Sed etiam consequat risus aliquam. Amet scelerisque lorem lacus, sapien, ut ornare...', style: kBasicSmallTextStyle,),
),
//Show all reviews
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(right: 24.0, top: 28.0),
child: Text('Show All Reviews', style: kBasicBlueBoldTextStyle,),
),
],
),
// Gridview will come here
SizedBox(height: 100,),
]
),```
答案 0 :(得分：0)
为了获得图像中显示的结果，最好的方法是使用 ListView() 而不是使用 GridView。
您只需在普通 ListView 中添加一行代码即可轻松实现所需的输出。 您需要在 ListView 中添加的行是：
scrollDirection: Axis.horizontal
这将完成您的工作。