SwiftUIのForEachをFlutterでやってみたい（forループ編）／Widgetの入れ子表示

追記

• ListVIew.builder()の方が使いやすいです。

コード

title_list_view.dart

  @override
  Widget build(BuildContext context) {
    List<Cover> cover = [
      Cover(author: "カフネ", name: "阿部暁子", createdAt: DateTime(2011,12,30,13,44,12), updatedAt: DateTime(2015,11,30,10,10,35)),
      Cover(author: "アルプス席の母", name: "早見和真", createdAt: DateTime(2013,5,22,19,00,03), updatedAt: DateTime(2022,10,09,05,30,35)),
      Cover(author: "小説", name: "野崎まど", createdAt: DateTime(2017,9,10,18,27,36), updatedAt: DateTime(2025,08,01,3,17,21))
    ];
    return Scaffold(
      body: Row(
        children: [
          for(int i = 0; i < cover.length; i++) ... {
            TitleListComponent(cover: cover)
          }
        ],
      ),
    );
  }

解説

title_list_view.dart

Row(
    children: [
      for(int i = 0; i < cover.length; i++) ... {
        TitleListComponent(cover: cover)
      }
    ],
),

【ポイント】

• Rowの説明は割愛
• Childrenの配列でforによる要素生成を行う
• 必ず「...」 を{}の前に書く必要ある

スプレッド演算子

• ...はスプレッド演算子と呼ばれている。
• リストや配列を一度平坦にして、新しく一つのリストを作り直すための演算子である。
• このケースだと、一度リストを平坦にした後で、for文で受け取ったListのcoverをWidget型に適合するようにしている。