listview - 是否可以在类的一个参数中添加多个值？

问题描述

我是新来的颤振我想知道是否可以在一个类的一个参数中添加多个值？

例如对于参数storePageItemPrice、storePageItemName 和storePageImage，我希望能够在每个商店中添加多个价格、商品名称和多个产品图片。

我怎样才能做到这一点？

例子

class Stores {
String storeName;
String storeImage;
String storeDeliveryTime;
String deliveryCharges;
String storePageImage;
String storePageItemName;
String storePageItemPrice;

Stores.list({this.storeName, this.storeDeliveryTime, 
this.storeImage,this.deliveryCharges,this.storePageImage, 
this.storePageItemName, this.storePageItemPrice});
 }

List<Stores> storesList = [

Stores.list(
storeName: “STORE 1”,
storeImage: "assets/images/STORE1FRONT”,
storeDeliveryTime: "25 min",
deliveryCharges: "£3.90",
storePageImage: “BE ABLE TO ADD MORE THAN ONE IMAGE“ (and then build 
widget.storePageImage),
storePageItemName: “BE ABLE TO ADD MORE THAN ONE ITEM“,(and then 
build widget.storePageItemName),
storePageItemPrice: "BE ABLE TO ADD MORE THAN ONE PRICE”(and then 
build widget.storePageItemPrice),

),

Stores.list(
storeName: “STORE 2”,
storeImage: "assets/images/STORE2FRONT",
storeDeliveryTime: "25 min",
deliveryCharges: "£2.90",
storePageImage: “BE ABLE TO ADD MORE THAN ONE IMAGE“ (and then    
build widget.storePageImage),
storePageItemName: “BE ABLE TO ADD MORE THAN ONE ITEM“,(and then 
build widget.storePageItemName),
storePageItemPrice: "BE ABLE TO ADD MORE THAN ONE PRICE”(and then 
build widget.storePageItemPrice),
),
];

视觉示例；这是主页https://imgur.com/a/0YiMUHj

单击餐厅后，它会导航到餐厅的页面（https://imgur.com/a/KbsIepO），其中添加了多个项目（一旦连接到数据库，就可以按需添加和删除）

第一页代码

ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 1000),
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: storesList.length,
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: <Widget>[
                GestureDetector(
                    onTap: (){Navigator.of(context).push(new 
MaterialPageRoute(
                        builder: (context) => new StoresPage(
                          storeName: storesList[index].storeName,
                          storeDeliveryTime: 
storesList[index].storeDeliveryTime,
                          deliveryCharges: 
storesList[index].deliveryCharges,
                          storePageImage: 
storesList[index].storePageImage,
                          storePageItemName: 
storesList[index].storePageItemName,
                          storePageItemPrice: 
storesList[index].storePageItemPrice,
                        )));},
                    child: Padding(
                      padding: const EdgeInsets.only(top:5.0),
                      child: Column(
                          children: <Widget>[
                            Container(
                              height: 205,
                              width: 380,
                              child: Image(image: 
AssetImage(storesList[index].storeImage),
                                fit: BoxFit.fill,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 
15.0, right: 15.0),
                              child: Row(
                                mainAxisAlignment: 
MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                Text(storesList[index].storeName),
                                  Row(children: <Widget>[
                                    Icon(Icons.update, size: 20.0),

Text(storesList[index].storeDeliveryTime),
                                  ],
                                  ),
                              ],
                              ),
                            ),
                          ],
                        ),
                    ),
                  ),
              ],
            );
          },
        ),
      ),

导航到商店页面

class StoresPage extends StatefulWidget {
String storeName;
String storeDeliveryTime;
String deliveryCharges;
List<String> storePageImage;
List<String> storePageItemName;
List<String> storePageItemPrice;

StoresPage({
this.storeName, this.storeDeliveryTime, this.deliveryCharges, 
this.storePageImage, this.storePageItemName, this.storePageItemPrice
});

List<Stores> storesList = [
newStore1,
newStore2,
];

此代码无效

SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(left: 10.0, top: 7.0),
                  child: Container(
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        image: DecorationImage(fit: BoxFit.fill,image: 
AssetImage(widget.storePageImage()))
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),

我试图在商店页面中使用此代码，但什么也没发生

ConstrainedBox(constraints: BoxConstraints(maxHeight: 1000),
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: storesList.length,
          itemBuilder: (BuildContext context, int index){
            return Column(
              children: <Widget>[
                GestureDetector(
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 10.0, top: 7.0),
                        child: Container(
                          height: 100,
                          width: 100,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              image: DecorationImage(fit: 
BoxFit.fill,image: 
AssetImage(storesList[index].storePageImage.toString()))
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),

标签： listviewflutterdart

解决方案

确保属性类型为 List

class Stores {
  String storeName;
  String storeImage;
  String storeDeliveryTime;
  String deliveryCharges;
  List<String> storePageImage;
  List<String> storePageItemName;
  List<double> storePageItemPrice;

  Stores.list({this.storeName, this.storeDeliveryTime, 
  this.storeImage,this.deliveryCharges,this.storePageImage, 
  this.storePageItemName, this.storePageItemPrice});
}

稍后您可以通过此创建实例

Stores newStore1 = Stores.list(
  storeName: "STORE 1",
  storeImage: "assets/images/STORE1FRONT",
  storeDeliveryTime: "25 min",
  deliveryCharges: "£2.90",
  storePageImage: ["image1.jpg", "image2.jpg"],
  storePageItemName: ["Apple", "Mango"],
  storePageItemPrice: [100, 200],
);

Stores newStore2 = Stores.list(
  storeName: "STORE 2",
  storeImage: "assets/images/STORE2FRONT",
  storeDeliveryTime: "25 min",
  deliveryCharges: "£2.90",
  storePageImage: ["image1.jpg", "image2.jpg"],
  storePageItemName: ["Apple", "Mango"],
  storePageItemPrice: [100, 200],
);


List<Stores> storesList = [
  newStore1,
  newStore2,
]

如何渲染它？

由于我们需要渲染多个图像，因此我们需要将其所有父级相乘。

它的 Padding、Container、BoxDecoration、DecorationImage 定义必须多次渲染。

输出

这是我的花卉图像的结果。

*8 月 25 日更新

这是对您最新代码版本的修复

return Scaffold(
  appBar: AppBar(title: Text("Restauran Menus")),
  body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            for (var storeImage in storePageImage) // loops storePageImage
              Padding(
                padding: EdgeInsets.only(left: 10.0, top: 7.0),
                child: Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      image: AssetImage(storeImage),
                    ),
                  ),
                ),
              ),
          ],
        ),
      ],
    ),
  ),
);

完整代码

查看这个 repo Github