如何将图像添加到我创建的产品列表中？答案

【问题标题】：How can I add an image to the product list I created flutter?如何将图像添加到我创建的产品列表中？
【发布时间】：2022-01-20 10:45:59
【问题描述】：

Flutter//如何将图片添加到我创建的产品列表中？

这是产品模型.dart

class ProductScreen extends StatelessWidget {
  final ValueSetter<ProductModel> _valueSetter;

  ProductScreen(this._valueSetter);

  List<ProductModel> products = [
    ProductModel("T-shirt1", 50,),
    ProductModel("T-shirt2", 60,),
    ProductModel("T-shirt3", 70,),
    ProductModel("T-shirt4", 80,),
    ProductModel("T-shirt5", 90,),
  ];

这是 Productmodel.dart

lass ProductModel{
      String name;
      int price;
    
    
      ProductModel(this.name, this.price);

【问题讨论】：

标签： flutter flutter-listview flutter-image

【解决方案1】：

型号：

class ProductModel{
      String name, image;
      int price;

ProductModel(this.name, this.price, this.image);
}

在小部件中（无状态/有状态）：

class ProductScreen extends StatelessWidget {

  List<ProductModel> products = [
    ProductModel("T-shirt1", 50,"www.samplepic.com/1"),
    ProductModel("T-shirt2", 60,"www.samplepic.com/2"),
    ProductModel("T-shirt3", 70,"www.samplepic.com/3"),
    ProductModel("T-shirt4", 80,"www.samplepic.com/4"),
    ProductModel("T-shirt5", 90,"www.samplepic.com/5"),
  ];
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Showing Images From Model"
        ),
       
      ),
      body: Center(
      child: Image.network(products[0])
         ),
     );
}
}

【讨论】：

我是 Flutter 的新手。我做了模型部分。但我无法制作产品部分，我应该在哪里写图像代码？

【解决方案2】：

也将其添加到产品模型中，通常图像来自网络服务作为 url 或资产路径，因此您可以将其设为字符串。像这样：

class ProductModel{
      String name, image;
      int price;

ProductModel(this.name, this.price, this.image);

在实施过程中像这样：

class ProductScreen extends StatelessWidget {
  final ValueSetter<ProductModel> _valueSetter;

  ProductScreen(this._valueSetter);

  List<ProductModel> products = [
    ProductModel("T-shirt1", 50,"www.samplepic.com/1"),
    ProductModel("T-shirt2", 60,"www.samplepic.com/2"),
    ProductModel("T-shirt3", 70,"www.samplepic.com/3"),
    ProductModel("T-shirt4", 80,"www.samplepic.com/4"),
    ProductModel("T-shirt5", 90,"www.samplepic.com/5"),
  ];

【讨论】：

【解决方案3】：

我是 Flutter 的新手。我做了模型部分。但是我无法制作产品部分，我应该在哪里写图像代码？

import 'package:flutter/material.dart';
    import '../ProductModel.dart';
    
   
    class ProductScreen extends StatelessWidget {
      final ValueSetter<ProductModel> _valueSetter;
    
      ProductScreen(this._valueSetter);
    
      List<ProductModel> products = [
        ProductModel("T-shirt1", 50,""),
        ProductModel("T-shirt2", 60,"www.samplepic.com/1"),
        ProductModel("T-shirt3", 70,"www.samplepic.com/1"),
        ProductModel("T-shirt4", 80,"www.samplepic.com/1"),
        ProductModel("T-shirt5", 90,"www.samplepic.com/1"),
      ];
    
      @override
      Widget build(BuildContext context) {
        return ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(products[index].name),
                trailing: Text(
                  "₺${products[index].price}",
                  style: const TextStyle(
                      color: Colors.redAccent,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                onTap: () {
                  _valueSetter(products[index]);
                },
              );
            },
            separatorBuilder: (context, index) {
              return const Divider();
            },
            itemCount: products.length);
      }
    }

【讨论】：

如果您的问题需要更多详细信息，请编辑您的问题并添加详细信息，不在答案中！

【解决方案4】：

You can use the leading property of ListTile and call your products list inside the container. and inside a container, you can shape your image box. Hope you will get your answer.

  import 'package:flutter/material.dart'; 
    class ProductScreen extends StatelessWidget {
      final ValueSetter<ProductModel> _valueSetter;
    
      ProductScreen(this._valueSetter);
    
      List<ProductModel> products = [
        ProductModel("T-shirt1", 50,""),
        ProductModel("T-shirt2", 60,"www.samplepic.com/1"),
        ProductModel("T-shirt3", 70,"www.samplepic.com/1"),
        ProductModel("T-shirt4", 80,"www.samplepic.com/1"),
        ProductModel("T-shirt5", 90,"www.samplepic.com/1"),
      ];
    
      @override
      Widget build(BuildContext context) {
        return ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                leading: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      shape: BoxShape.rectangle,
                      image: DecorationImage(
                        image: NetworkImage(products[index].image),fit: BoxFit.cover,
                      )
                  ),
                ),
                title: Text(products[index].name),
                trailing: Text(
                  "₺${products[index].price}",
                  style: const TextStyle(
                      color: Colors.redAccent,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                onTap: () {
                  _valueSetter(products[index]);
                },
              );
            },
            separatorBuilder: (context, index) {
              return const Divider();
            },
            itemCount: products.length);
      }
    }
    class ProductModel{
      String name, image;
      int price;
    
      ProductModel(this.name, this.price, this.image);

【讨论】：