在Flutter中点击图标时,如何打印图标名称

在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,));
      }),);
  }

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

iCMS 回答:在Flutter中点击图标时,如何打印图标名称

这不可能直接在颤动中实现,因为它需要使用dart:mirrors之类的反射,而颤振不支持这种反射。

要实现此目的,您将必须手动将每个可能的iconData映射到关联的String

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

_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,));
      }),);
  }
,

您可以在下面复制粘贴运行完整代码
您可以使用GlobalKeyhttps://pub.dev/packages/icons_helper
枯萎GlobalKey得到当前的icon并使用icon_helper比较code pointprint

代码段

var keyList = [
      GlobalKey(),GlobalKey(),GlobalKey()
    ];
return GridView.count(
  crossAxisCount: 8,(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

工作演示

enter image description here

完整代码

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,];
    var keyList = [
      GlobalKey(),GlobalKey()
    ];
    return GridView.count(
      crossAxisCount: 8,(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}');
                }
              });
            },);
  }

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

试试这个:

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

)

本文链接:https://www.f2er.com/1831985.html

大家都在问