如何在飞镖(扑动)中创建符号切换

Question

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

我有一个符号表，但无法找到如何使符号在单击时切换。如何使每个图标都有自己的切换，而不构建近100个单独的变量(或数组(。图标可以有属性吗？

我在尝试使用onTap时遇到了以下错误(这是我从flutter演示应用程序中得到的，但在这种情况下无法正常工作。(

编译器消息：lib/main.dart:33:32:错误：在此之前应为"]"。onTap:(({^lib/main.dart:33:27:错误：没有为类"_MyAppState"定义getter"onTap"。

"_MyAppState"来自"package:app1/main.dart"("lib/main.dart"(。尝试将名称更正为现有getter的名称，或者定义名为"onTap"的getter或字段。onTap:(({^^^^^

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

Answer 1

您希望IconButton能够使用它的等效onTap、onPressed。onTap参数只能在小部件可用时传递，不能随意使用。

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旁边。