Flutter：根据值显示不同的图标

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个对象列表，每个对象都有一个icon属性，如下所示：

List<Map<String, String>> _categories = [
    {
      'name': 'Sports',
      'icon': 'directions_run',
    },
    {
      'name': 'Politics',
      'icon': 'gavel',
    },
    {
      'name': 'Science',
      'icon': 'wb_sunny',
    },
];

然后，我在ListView.builder（）小部件内使用了一个小部件。目前，我正在显示一个静态选择的图标，以与列表中的文本一起显示。我的问题是如何使用对象中的icon属性动态地选择为每个列表项显示的图标？

  Widget _buildCategoryCards(BuildContext context, int index) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0),
      child: Card(
        child: Container(
          padding: EdgeInsets.all(15.0),
          child: Row(
            children: <Widget>[
              Icon(Icons.directions_run),
              SizedBox(width: 20.0),
              Text(_categories[index]['name']),
            ],
          ),
        ),
      ),
    );
  }

回答：

更改List以存储IconData而不是String：

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

然后，IconData从您的build方法调用：

  Widget _buildCategoryCards(BuildContext context, int index) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0),
      child: Card(
        child: Container(
          padding: EdgeInsets.all(15.0),
          child: Row(
            children: <Widget>[
              Icon(_categories[index]['icon']),
              SizedBox(width: 20.0),
              Text(_categories[index]['name']),
            ],
          ),
        ),
      ),
    );
  }

请注意，使用a Map来做您想要的事情是没有用的（甚至没有效率）。您应该使用一个自定义类：

Class Category {
  String name;
  IconData icon;
  Category(this.name, this.icon);
}

然后将其替换List为：

List<Category> _categories = [
    Category('Sports', Icons.directions_run),
    Category('Politics', Icons.gavel),
    Category('Science', Icons.wb_sunny),
];

最后在您的小部件中：

        children: <Widget>[
          Icon(_categories[index].icon),
          SizedBox(width: 20.0),
          Text(_categories[index].name),
        ],

以上是 Flutter：根据值显示不同的图标 的全部内容， 来源链接： utcz.com/qa/424210.html

回到顶部