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))]),
),