颤动中的可点击水平列表视图。如何使用列表中的图像制作可点击的列表视图答案

【问题标题】：tappable Horizontal list view in flutter. how do i make a clickable list view with images from the list颤动中的可点击水平列表视图。如何使用列表中的图像制作可点击的列表视图
【发布时间】：2020-10-13 11:09:29
【问题描述】：

我是 Flutter 和 dart 的新手，我想制作一个水平列表，其中包含可以单击的图像，并将它们带到产品页面。我希望从我将用来制作产品页面的 var product_list 中获取产品详细信息。以下代码运行但列表不可见

import 'package:flutter/material.dart';

import 'package:app/pages/product_details.dart';

class Mostpop extends StatelessWidget {
  final product_name;
  final product_picture;
  final product_price;

  Mostpop({
    this.product_name,
    this.product_picture,
    this.product_price
});
  var product_list = [
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "images/thumbnails/t1.jpg",
      "price": 99,
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal ListView'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(),
        height: MediaQuery.of(context).size.height * 0.35,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: product_list.length, itemBuilder: (context, index) {
          return Container(
            width: MediaQuery.of(context).size.width * 0.6,
            child: Card(
              color: Colors.blue,
              child: Container(
                child: Center(child: Image.asset(product_picture,fit: BoxFit.cover,)),
              ),
            ),
          );
        }),
      ),
    );
  }
}

【问题讨论】：

能否添加问题截图？

标签： flutter user-interface dart flutter-layout

【解决方案1】：

问题是由以下行引起的

child: Center(child: Image.asset(product_picture,fit: BoxFit.cover,)),

product_picture 未初始化（其为空）。此外，当您使用 ListView.Builder 时，您可以利用 index 参数为产品列表中的每个项目返回 Widget。

你可以将代码修改成如下-

class Mostpop extends StatelessWidget {
  final product_name;
  final product_picture;
  final product_price;

  Mostpop({this.product_name, this.product_picture, this.product_price});
  var product_list = [
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
    {
      "name": "The Bundle",
      "picture": "assets/images/t1.png",
      "price": 99,
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal ListView'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(),
        height: MediaQuery.of(context).size.height * 0.35,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: product_list.length,
            itemBuilder: (context, index) {
              return Container(
                width: MediaQuery.of(context).size.width * 0.6,
                child: Card(
                  color: Colors.blue,
                  child: Container(
                    child: Center(
                        child: Image.asset(
                      product_list[index]["picture"],
                      fit: BoxFit.cover,
                    )),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

您还应该考虑将小部件树与模型定义分开，强类型模型也将帮助您在编译时检测所有类型检查错误，否则它们可能会在运行时到达。

【讨论】：

【解决方案2】：

制作一系列将保存在列表视图中的容器小部件
映射列表以便将 product_pictures 传递给 Image.asset 的每个功能

见 => Dart: mapping a list (list.map)

当您在 Imageasset 中调用 product_picture 时，没有任何内容被引用，因为 product_picture 在列表中，您需要在字典中调用产品图片时使用该列表

【讨论】：