在 Flutter 中绘制带有嵌套循环的井字游戏网格

Question

我的问题如下。

我开始画出井字游戏网格，其中包含从行小部件开始的 noughts 和 crosss。然后我使用循环创建三列作为该行的子级。在我创建的每一列中 - 再次使用循环 - 三个容器。这些容器应该包含代表五角星和十字架的图标。到目前为止，一切都很好。请看下面的代码：

Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          for (var i = 0; i < 3; i++)
            Column(mainAxisAlignment: MainAxisAlignment.center, children: [
              for (var j = 0; j < 3; j++)
                Container(
                  child: Icon(
                    iconlist[i][j],
                    color: Colors.pink,
                    size: 60,
                    semanticLabel:
                        'Text to announce in accessibility modes',
                  ),
                  padding: const EdgeInsets.all(30),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.blue, width: 4)),
                ),
            ])
        ])

如您所见，我有一个名为 iconlist 的列表（它自然位于小部件树之外）。该列表实际上是一个嵌套列表：它具有三个列表作为元素。这些元素也是列表：这些子列表表示行，并且它们具有三个图标（IconData 类型），每个图标作为元素。列表的代码是：

    List iconlist = <List>[
  <IconData>[Icons.clear, Icons.radio_button_unchecked, Icons.clear],
  <IconData>[Icons.clear, Icons.radio_button_unchecked, Icons.clear],
  <IconData>[Icons.clear, Icons.radio_button_unchecked, Icons.clear]
];

非常合乎逻辑且可行的解决方案，您可能会这么想（我也是这么想的），但 Flutter 根本不喜欢这种结构。当我尝试运行此应用程序时，出现以下错误（红色背景上的黄色文本）：

NoSuchMethodError：类“IconData”没有实例方法“[]”。 接收方：“IconData”实例尝试调用：另请参阅： https://flutter.dec/docs/testing/errors

“有趣”的地方在于，例如 iconlist[i + j] 可以完美运行。出于某种奇怪的原因，我无法通过下标列表来获取 IconData，即 iconlist[i][j]。

我做错了什么，有解决方法吗？

Answer 1

我复制了您的代码，它可以正常工作，没有任何错误。请尝试运行以下代码：

    import 'package:flutter/material.dart';
    
    final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
    
List<List<IconData>> iconlist = [
  <IconData>[Icons.clear, Icons.radio_button_unchecked, Icons.clear],
  <IconData>[Icons.clear, Icons.radio_button_unchecked, Icons.clear],
  <IconData>[Icons.clear, Icons.radio_button_unchecked, Icons.clear]
];

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }
    
    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        
        return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              for (var i = 0; i < 3; i++)
                Expanded(child:Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                  for (var j = 0; j < 3; j++)
                    Container(
                      child: Icon(
                        iconlist[i][j],
                        color: Colors.pink,
                        size: 60,
                        semanticLabel:
                            'Text to announce in accessibility modes',
                      ),
                      padding: const EdgeInsets.all(30),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.blue, width: 4)),
                    ),
                ]))
            ]);
    }
    }