Flutter：使用復雜串列中的標題和專案填充串列視圖

我有以下串列：

[
    {
        "ID": "1",
        "ParentID": "0",
        "CategoryName": "FourWheeler",
        "Children": [
        {
            "ID": "9",
            "ParentID": "1",
            "CategoryName": "Jeep",
            "ParentCategoryName": "FourWheeler"
        },
        {
            "ID": "10",
            "ParentID": "1",
            "CategoryName": "Taxi",
            "ParentCategoryName": "FourWheeler"
        },
        {
            "ID": "11",
            "ParentID": "1",
            "CategoryName": "Car",
            "ParentCategoryName": "FourWheeler"
        },
        {
            "ID": "12",
            "ParentID": "1",
            "CategoryName": "Van",
            "ParentCategoryName": "FourWheeler"
        },
        {
            "ID": "13",
            "ParentID": "1",
            "CategoryName": "Other",
            "ParentCategoryName": "FourWheeler"
        }]
    },
    {
        "ID": "2",
        "ParentID": "0",
        "CategoryName": "Boat",
        "Children": [
        {
            "ID": "14",
            "ParentID": "2",
            "CategoryName": "Motorboat",
            "ParentCategoryName": "Boat"
        },
        {
            "ID": "15",
            "ParentID": "2",
            "CategoryName": "Sailingboat",
            "ParentCategoryName": "Boat"
        },
        {
            "ID": "16",
            "ParentID": "2",
            "CategoryName": "SteamBoat",
            "ParentCategoryName": "Boat"
        },
        {
            "ID": "17",
            "ParentID": "2",
            "CategoryName": "Other",
            "ParentCategoryName": "Boat"
        }]
    }
]

我需要ListView在此串列的基礎上進行填充。我們應該以這樣的方式填充串列視圖，即有標題，并且每個標題都有各自的專案。例如， ListView 應該看起來像，

**FourWheeler**
   Jeep
   Taxi
   Car
   Van
   Other
**Boat**
   Motorboat
   Sailingboat
   Steamboat
   Other

對于這樣的簡單串列：

List Fruits = ['Apple','Orange','Kiwi','Avocado'];

我會這樣做

Fruits.map<Widget>((fruit)=>Container(child: Text(fruit))).toList();

但我不知道如何處理我遇到的情況。任何幫助將不勝感激。謝謝

uj5u.com熱心網友回復：

這是您可以填充的一種方法，ListView如您所描述的：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            for (final header in data) ...[
              ListTile(title: Text('**${header['CategoryName']}**')),
              for (final item in header['Children'] ?? [])
                ListTile(title: Text('   ${item['CategoryName']}')),
            ],
          ],
        ),
      ),
    );
  }
}

const List<Map<String, dynamic>> data = [
  {
    "ID": "1",
    "ParentID": "0",
    "CategoryName": "FourWheeler",
    "Children": [
      {
        "ID": "9",
        "ParentID": "1",
        "CategoryName": "Jeep",
        "ParentCategoryName": "FourWheeler"
      },
      {
        "ID": "10",
        "ParentID": "1",
        "CategoryName": "Taxi",
        "ParentCategoryName": "FourWheeler"
      },
      {
        "ID": "11",
        "ParentID": "1",
        "CategoryName": "Car",
        "ParentCategoryName": "FourWheeler"
      },
      {
        "ID": "12",
        "ParentID": "1",
        "CategoryName": "Van",
        "ParentCategoryName": "FourWheeler"
      },
      {
        "ID": "13",
        "ParentID": "1",
        "CategoryName": "Other",
        "ParentCategoryName": "FourWheeler"
      }
    ]
  },
  {
    "ID": "2",
    "ParentID": "0",
    "CategoryName": "Boat",
    "Children": [
      {
        "ID": "14",
        "ParentID": "2",
        "CategoryName": "Motorboat",
        "ParentCategoryName": "Boat"
      },
      {
        "ID": "15",
        "ParentID": "2",
        "CategoryName": "Sailingboat",
        "ParentCategoryName": "Boat"
      },
      {
        "ID": "16",
        "ParentID": "2",
        "CategoryName": "SteamBoat",
        "ParentCategoryName": "Boat"
      },
      {
        "ID": "17",
        "ParentID": "2",
        "CategoryName": "Other",
        "ParentCategoryName": "Boat"
      }
    ]
  }
];

您還可以將每個標題與類似的東西分組ExpansionTile：

ListView(
  children: [
    for (final header in data)
      ExpansionTile(
        title: Text('**${header['CategoryName']}**'),
        children: [
          for (final item in header['Children'] ?? [])
            ListTile(title: Text('   ${item['CategoryName']}')),
        ],
      ),
  ],
),

標籤：扑 镖

上一篇：顫動中的文本按鈕

下一篇：Flutterbloc-在事件處理程式正常完成后呼叫發出