FLUTTER - 将列表的一部分映射到小部件

Question

我正在处理 ANAGRAM 游戏屏幕。 这个想法是将单词的字母打乱，并将它们变成单独的可拖动框。 现在，我已经成功地将我的字母列表映射到小部件 (LetterBox)。 这是代码：

 Widget build(BuildContext context) {
    var uD = Provider.of<UdProvider>(context);
    List letters = widget.word!.split("");
    letters.shuffle();
    print(letters);
    return Scaffold(
      backgroundColor: Colors.indigo[900],
             body: Row(children: [
        ...letters.map((e) => Expanded(child: LetterBox(letter: e))),
      ]),
    );

它工作正常，但我遇到了问题。 如果这个词有太多字母，它最终会给我的行带来问题。 如果单词长于 7，那么在一种列中每行最多显示 7 个字母会很棒。有没有办法将列表的一部分映射到一行，其余部分映射到另一行？

Answer 1

您可能想看看GridView 。 使用GridView.count构造函数，您可以在添加另一行之前指定要在一个方向（默认为水平）显示的项目数。

GridView.count(
  crossAxisCount: 7,
  children: [...letters.map((e) => LetterBox(letter: e))]),
),