【发布时间】：2021-03-22 19:10:58
【问题描述】：
抱歉，我提出了一个愚蠢的问题，但我如何在卡片中创建一个 ListView.builder，其中包含图片中的类别：Check here the image
【问题讨论】：
【发布时间】：2021-03-22 19:10:58
【问题描述】：
Card(
child:
ListView.seperated(
seperatorBuilder: (ctx,_) => Divider(),
itemBuilder(ctx,i) => Text("Product $i")
您可以使用 separated 而不是 builder 执行此类操作，还允许您在每个元素之间添加 Divider
【讨论】：
-
好的，很好，但我还必须生成类别和里面的内容。更类似于 List 中的 List 的东西。
我实际上制作了具有以下属性的物品：
class Item {
double index;
String category;
String image;
String title;
String desc;
double likes;
bool hasAr;
double price;
String weight;
double quantity = 0;
Item(this.index, this.category, this.image, this.title, this.desc, this.likes,
this.hasAr, this.price, this.weight, this.quantity);
}
List<Item> apa = [
Item(0, 'Apa', '', 'Apa plata Borsec', '', 0, false, 6, '500ml', 0),
Item(1, 'Apa', '', 'Apa minerala Borsec', '', 0, false, 6, '500ml', 0),
Item(2, 'Apa', '', 'Apa plata Aqua Carpatica', '', 0, false, 8, '330ml', 0),
Item(
3, 'Apa', '', 'Apa minerala Aqua Carpatica', '', 0, false, 8, '330ml', 0),
Item(4, 'Apa', '', 'Apa Voss', '', 0, false, 15, '330ml', 0),
];
List<Item> racoritoare = [
Item(0, 'Racoritoare', '', 'Coca Cola', 'descriere exemplu de produs', 0,
false, 9, '500ml', 0),
Item(1, 'Racoritoare', '', 'Sprite', 'descriere exemplu de produs', 0, false,
9, '500ml', 0),
Item(2, 'Racoritoare', '', 'Fanta', 'descriere exemplu de produs', 0, false,
9, '500ml', 0),
Item(3, 'Racoritoare', '', 'Schweppes', 'descriere exemplu de produs', 0,
false, 12, '330ml', 0),
];
class DrinkCategory {
final double index;
final String category;
final List products;
DrinkCategory(this.index, this.category, this.products);
}
List<DrinkCategory> drinkCategory = [
DrinkCategory(1, 'Apa', apa),
DrinkCategory(2, 'Racoritoare', racoritoare),
DrinkCategory(3, 'Bere', racoritoare),
DrinkCategory(4, 'Bere artizanala', racoritoare),
];
在此之后，我在我的 ListView.builder 中使用了以下代码：
ListView.builder(
// afisare carduri cu categorii
itemCount: drinkCategory.length,
itemBuilder: (context, i) =>
// ignore: missing_return
Consumer<Cart>(builder: (context, cart, child) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Center(
child: Container(
width: 0.92.sw,
margin: const EdgeInsets.only(top: 6),
// card
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.secondary,
boxShadow: [secondaryBoxShadow],
borderRadius: BorderRadius.circular(18)),
child: Padding(
padding: const EdgeInsets.only(
left: 15,
right: 15,
top: 20,
bottom: 20),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.only(
bottom: 12),
child: Text(
drinkCategory[i]
.category, // titlu
style: TextStyle(
fontSize: 18,
fontWeight:
FontWeight.bold)),
),
ListView.builder(
// Afisare continut categorii (card)
shrinkWrap: true,
physics:
const NeverScrollableScrollPhysics(),
itemCount: drinkCategory[i]
.products
.length,
itemBuilder: (context, p) =>
Consumer<Cart>(
builder:
(context, cart, child) {
return Padding(
padding:
const EdgeInsets.only(
bottom: 12),
child: Row(
children: [
Expanded(
flex: 7,
child: Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: [
Padding(
padding:
const EdgeInsets
.only(
bottom:
4),
child: Text(
drinkCategory[
i]
.products[
p]
.title
.toString(),
textAlign:
TextAlign
.left,
style: Theme.of(
context)
.textTheme
.headline2
.copyWith(
fontSize:
16,
height:
1.1)),
),
Offstage(
offstage:
drinkCategory[
i]
.products[
p]
.desc
.isEmpty,
child: Text(
drinkCategory[
i]
.products[
p]
.desc
.toString(),
textAlign:
TextAlign
.left,
style: Theme.of(
context)
.textTheme
.bodyText2
.copyWith(
fontSize:
13),
),
),
Text(
drinkCategory[i]
.products[p]
.weight
.toString(),
textAlign:
TextAlign
.left,
style: Theme.of(
context)
.textTheme
.bodyText2
.copyWith(
fontSize:
13),
),
],
),
),
Expanded(
flex: 3,
child: Column(
crossAxisAlignment:
CrossAxisAlignment
.end,
children: [
Text(
drinkCategory[i].products[p].price.toStringAsFixed(drinkCategory[i].products[p].price.truncateToDouble() == drinkCategory[i].products[p].price
? 0
: 2) +
" RON",
textAlign:
TextAlign
.left,
style: Theme.of(
context)
.textTheme
.bodyText2
.copyWith(
fontSize: 16,
height: 1)),
Padding(
padding: const EdgeInsets
.only(
top: 8,
bottom:
4),
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Visibility(
visible:
drinkCategory[i].products[p].quantity >= 1,
child:
ButtonTheme(
padding: EdgeInsets.symmetric(vertical: 2.0, horizontal: 8.0), //adds padding inside the button
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, //limits the touch area to the button area
minWidth: 0, //wraps child's width
height: 0, //wraps child's height
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0x60B40202),
spreadRadius: 0.25,
blurRadius: 12,
)
],
),
child: RaisedButton(
onPressed: () {
cart.remove(drinkCategory[i].products[p]);
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(gradient: mainPrimaryGradient, borderRadius: BorderRadius.circular(8.0)),
child: Container(
constraints: BoxConstraints(maxWidth: 25.0, minHeight: 22.0),
alignment: Alignment.center,
child: Text(
"-",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
),
),
),
),
Visibility(
visible:
drinkCategory[i].products[p].quantity >= 1,
child:
Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: Text(
drinkCategory[i].products[p].quantity.toStringAsFixed(drinkCategory[i].products[p].quantity.truncateToDouble() == drinkCategory[i].products[p].quantity ? 0 : 2),
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
),
),
),
),
ButtonTheme(
padding:
EdgeInsets.symmetric(vertical: 2.0, horizontal: 8.0), //adds padding inside the button
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap, //limits the touch area to the button area
minWidth:
0, //wraps child's width
height:
0, //wraps child's height
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color(0x60B40202),
spreadRadius: 0.25,
blurRadius: 12,
)
],
),
child: RaisedButton(
onPressed: () {
cart.add(drinkCategory[i].products[p]);
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(gradient: mainPrimaryGradient, borderRadius: BorderRadius.circular(8.0)),
child: Container(
constraints: BoxConstraints(maxWidth: 25.0, minHeight: 22.0),
alignment: Alignment.center,
child: Text(
"+",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
)),
),
]),
)
]))
],
),
);
},
),
)
]))),
));
}),
),
【讨论】：