时间戳

首页 > 解决方案 > 如何用图像列表替换逗号分隔值？

flutter - 如何用图像列表替换逗号分隔值？

问题描述

我有这个布局：

在此处输入图像描述

代码：

              return ListView.builder(
                  itemBuilder: (context, position) {
                    return Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Expanded(
                              child:Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Padding(
                                      padding:
                                      const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
                                      child: Row(
                                        children: <Widget>[
                                          Image.asset("assets/images/"+ _displayedList[position].brand+".jpg", height: 40, width: 40),
                                        ],
                                      ),
                                    ),
                                    Padding(
                                      padding:
                                      const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.stretch,
                                        children: <Widget>[
                                          Text(
                                            _displayedList[position].location,
                                            style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold), textAlign: TextAlign.left,
                                          ),
                                        ],
                                      ),
                                    ),
                                    Padding(
                                      padding:
                                      const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.stretch,
                                        children: <Widget>[
                                          Text(
                                            _displayedList[position].distance.toString()+" KM",
                                            style: TextStyle(fontSize: 18.0), textAlign: TextAlign.left,
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ), flex: 3,
                            ),

                            Expanded(
                              child:Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Padding(
                                      padding:
                                      const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.stretch,
                                        children: <Widget>[
                                          Text(
                                            "\$"+ _displayedList[position].price.toString(),
                                            style: TextStyle(color: Colors.grey), textAlign: TextAlign.center,
                                          ),
                                        ],
                                      ),
                                    ),
                                    Padding(
                                      padding:
                                      const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.stretch,
                                        children: <Widget>[
                                          Text(
                                            _displayedList[position].facilities.toString(),
                                            style: TextStyle(color: Colors.grey), textAlign: TextAlign.center,
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ), flex: 2,
                            )
                          ],
                        ),
                        Divider(
                          height: 2.0,
                          color: Colors.grey,
                        )
                      ],
                    );
                  },
                  itemCount: _displayedList.length
              );

例如，查看餐厅、厕所文本？在上面的代码中，看看“_displayedList[position].facilities.toString()”

除了使用文本之外，如何使用图像以编程方式显示它们，例如： 在此处输入图像描述

或者，如果 _displayedList[position].facilities.toString() 为“ATM”，则仅显示 ATM 图标。

更新 我在下面尝试了 Zvi Karp 的建议，如下所示（使用图像而不是图标）：

 Map<String, Image> _serviceImages = {
    'atm': Image.asset("assets/images/atm.png", height: 30, width: 30),
    'toilet': Image.asset("assets/images/toilet.png", height: 30, width: 30),
    'restaurant': Image.asset("assets/images/restaurant.png", height: 30, width: 30)
  };


Padding(
    padding:
        const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
        child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: _serviceImages[_displayedList[position].facilities.toString().split(",").map<Image>((icon) => Image(_categories[icon])).toList()]
        ),
    ),

颤振抱怨：

参数类型“图像”不能分配给参数类型“列表”

标签： flutter

解决方案

首先，您需要创建一个图标映射，例如：

Map<String, IconData> _categories = {
    'Sports' : Icons.directions_run,
    'Politics' : Icons.gavel,
    'Science' : Icons.wb_sunny,
};

然后你可以像这样使用它：

child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: _categories[_displayedList[position].facilities.toString().split(",").map<Icon>((icon) => Icon(_categories[icon])).toList()
)

推荐阅读