如何在飞镖（颤振）中为符号创建切换答案

【问题标题】：How to create toggle for symbol in dart (flutter)如何在飞镖（颤振）中为符号创建切换
【发布时间】：2020-07-15 16:35:15
【问题描述】：

[在此处输入图像描述][1]我正在尝试创建一个屏幕测试应用程序，该应用程序可以显示屏幕的哪些部分对触摸没有响应。这应该是一个非常简单的单屏应用程序，其中包含可以单击以测试屏幕的符号表。

我的符号表正常工作，但找不到如何在单击时切换符号。如何在不构建近 100 个单独变量（或数组）的情况下让每个图标都有自己的切换。图标可以有属性吗？

我在尝试使用 onTap 时遇到以下错误（我从 Flutter 演示应用程序中获得，但在这种情况下无法正常工作。）

编译器消息： lib/main.dart:33:32：错误：在此之前应为“]”。点按：（）{ ^ lib/main.dart:33:27：错误：没有为类 '_MyAppState' 定义 getter 'onTap'。

'_MyAppState' 来自'package:app1/main.dart' ('lib/main.dart')。尝试将名称更正为现有 getter 的名称，或定义一个名为“onTap”的 getter 或字段。点按：（）{ ^^^^^


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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double iconSize = 40;
  @override
  Widget build(BuildContext context) {
    var toggledOn = false;
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Screen Tester'),
          ),
          body: Center(
              child: Column(children: <Widget>[
                Container(
                  margin: EdgeInsets.all(10),
                  child: Table(
                    border: TableBorder.all(),
                    children: [
                      TableRow( children: [
                        Column(children:[
                          Icon(Icons.adjust, size: iconSize,
                              color: toggledOn ? Colors.green : Colors.blue),
                          onTap: () {
                            setState(() {
                              if (toggledOn = false) {
                                toggledOn = true;
                              } else {
                                toggledOn = false;
                              }
                            });
                          }
                        ]),
                        Column(children:[
                          Icon(Icons.adjust, size: iconSize,
                              color: toggledOn ? Colors.green : Colors.red),
                        ]),
                        Column(children:[
                          Icon(Icons.adjust, size: iconSize,
                              color: toggledOn ? Colors.green : Colors.red),
                        ]),
                        Column(children:[
                          Icon(Icons.adjust, size: iconSize,
                              color: toggledOn ? Colors.green : Colors.red),
                        ]),
                        Column(children:[
                          Icon(Icons.adjust, size: iconSize,
                              color: toggledOn ? Colors.green : Colors.red),
                        ])
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,
                            color: toggledOn ? Colors.green : Colors.red),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                      TableRow( children: [
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                        Icon(Icons.adjust, size: iconSize,),
                      ]),
                    ],
                  ),
                ),
              ]))),

    );
  }
}```


  [1]: https://i.stack.imgur.com/O019z.png

【问题讨论】：

你想要一个IconButton。小部件不能自发添加它们没有的属性。
@Christopher Moore 我认为你是对的。请将其添加为答案。

标签： flutter dart flutter-layout

【解决方案1】：

您希望IconButton 能够使用它相当于onTap、onPressed。 onTap 参数只能在widget可用时传递，不能随意使用。

IconButton 将采用您现有的 Icon 并允许您添加 onPressed 回调。例如。

IconButton(
  icon: Icon(Icons.adjust, size: iconSize, color: toggledOn ? Colors.green : Colors.blue),
  onPressed: () {
    setState(() {
      if (!toggledOn) {
        toggledOn = true;
      } else {
        toggledOn = false;
      }
    });
  },
)

简单地跟踪编译器错误会比在 SO 上询问要快得多。它们通常很容易修复，尤其是与运行时错误相比。

编辑：

此外，您不能在 build 方法中声明 toggledOn。将它移到build 之外，以防止它回到每个build 的默认值。将它移到iconSize 旁边。

【讨论】：

这会创建一个可点击的按钮，但切换不起作用（现在也没有错误）。
@ReactorMatrix 请具体说明“不工作”。
@ReactorMatrix 在您的原始切换功能的比较中存在一个我没有注意到的问题，尽管它应该引发错误。我进行了编辑。
抱歉，我的意思是它创建了按钮，我可以看到它正在响应（我看到了涟漪效应），但颜色（或状态）没有改变
好的，这使得切换工作。尽管所有图标的切换都是相同的，但现在真正的问题来了（来自 OP）。如何在不构建近 100 个单独变量（或数组）的情况下让每个图标都有自己的切换。数组是我想到的最好的方法，每个 IconButton 都有一个条目。有没有办法为每个 IconButton 单独设置一个属性，或者数组是一个很好的方法？