在 Flutter 中点击图标时如何打印出图标名称答案

【问题标题】：How do I print out the icon name when the icon is tapped in Flutter在 Flutter 中点击图标时如何打印出图标名称
【发布时间】：2020-11-20 15:04:22
【问题描述】：

在 Flutter 中，当我点击图标时，我想打印出图标名称。这是我的代码：

_showIconGrid() {
    var ls = [
      Icons.extension,
      Icons.face,
      Icons.fastfood,
      Icons.favorite,
      Icons.favorite_border,
      Icons.home,
    ];

    return GridView.count(
      crossAxisCount: 8,
      children: List.generate(ls.length, (index) {
        var iconData = ls[index];
        return IconButton(
            onPressed: () {
              //here I would like to get the icon name e.g "Icons.flight"
              
            },
            icon: Icon(
              iconData,
            ));
      }),
    );
  }

当用户点击一个图标时，我应该能够看到用户点击了哪个图标。

【问题讨论】：

你试过只返回 iconData.toString() 吗？
@Aleksandar toString 类的 toString 方法不会创建 OP 想要的字符串。

标签： flutter icons mobile-application google-material-icons

【解决方案1】：

试试这个：

返回图标按钮( 工具提示：'你的字符串'

)

【讨论】：

【解决方案2】：

这在 Flutter 中无法直接实现，因为它需要像 dart:mirrors 这样的东西进行反射，而 Flutter 不支持。

要完成此操作，您必须手动将每个可能的 iconData 映射到关联的 String。

此方法使用从if-else 语句创建的Map：

_showIconGrid() {
    var ls = [
      Icons.extension,
      Icons.face,
      Icons.fastfood,
      Icons.favorite,
      Icons.favorite_border,
      Icons.home,
    ];

    var iconMap = Map<IconData, String>.fromIterable(
      ls,
      value: (item) {
        if(item == Icons.extension) {
          return "Icons.extension";
        }
        if(item == Icons.face) {
          return "Icons.face";
        }
        ...
        else {
          return "Unknown";
        }
      }
    );

    return GridView.count(
      crossAxisCount: 8,
      children: List.generate(ls.length, (index) {
        var iconData = ls[index];
        return IconButton(
            onPressed: () {
              print(iconMap[iconData]);    
            },
            icon: Icon(
              iconData,
            ));
      }),
    );
  }

【讨论】：

【解决方案3】：

您可以在下面复制粘贴运行完整代码
您可以使用GlobalKey 和https://pub.dev/packages/icons_helper
枯萎GlobalKey 以获取当前的icon 并使用icon_helper 比较code point 和print

代码sn-p

var keyList = [
      GlobalKey(),
      GlobalKey(),
      GlobalKey(),
      GlobalKey(),
      GlobalKey(),
      GlobalKey()
    ];
return GridView.count(
  crossAxisCount: 8,
  children: List.generate(ls.length, (index) {
    var iconData = ls[index];
    return IconButton(
        key: keyList[index],
        onPressed: () {
          IconButton iconbutton = keyList[index].currentWidget;
          helper.IconsMap.forEach((k, v) {
            var iconButton = iconbutton.icon as Icon;
            if (v.codePoint == iconButton.icon.codePoint) {
              print('${k}');
            }
          });
        },
        icon: Icon(
          iconData,

点击前两个图标的输出

I/flutter ( 6215): extension
I/flutter ( 6215): face

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:icons_helper/icons_helper.dart' as helper;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ShowData(),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class ShowData extends StatefulWidget {
  @override
  _ShowDataState createState() => _ShowDataState();
}

class _ShowDataState extends State<ShowData> {
  _showIconGrid() {
    var ls = [
      Icons.extension,
      Icons.face,
      Icons.fastfood,
      Icons.favorite,
      Icons.favorite_border,
      Icons.home,
    ];
    var keyList = [
      GlobalKey(),
      GlobalKey(),
      GlobalKey(),
      GlobalKey(),
      GlobalKey(),
      GlobalKey()
    ];
    return GridView.count(
      crossAxisCount: 8,
      children: List.generate(ls.length, (index) {
        var iconData = ls[index];
        return IconButton(
            key: keyList[index],
            onPressed: () {
              IconButton iconbutton = keyList[index].currentWidget;
              helper.IconsMap.forEach((k, v) {
                var iconButton = iconbutton.icon as Icon;
                if (v.codePoint == iconButton.icon.codePoint) {
                  print('${k}');
                }
              });
            },
            icon: Icon(
              iconData,
            ));
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return _showIconGrid();
  }
}

【讨论】：