如何访问 Dart 中的对象列表中的对象列表

Question

创建具有类型的选项卡并需要在相应的TabView中显示..

 var listOfItem = [
    {
      "types": "ARABIAN",
      "restaurants": [
        {
          "name": "ZauZau Restaurants",
          "location": "Mascat, Oman",
          "kms": "1.0 kms"
        },
        {
          "name": "MauMau Restaurants",
          "location": "Calicut, Oman",
          "kms": "2.0 kms"
        },
        {
          "name": "ChaCha Restaurants",
          "location": "Charat, Oman",
          "kms": "2.5 kms"
        },
      ]
    },
    {
      "types": "COFFEE SHOP",
      "restaurants": [
        {
          "name": "ZauZau Restaurants",
          "location": "Mascat, Oman",
          "kms": "1.0 kms"
        },
      ]
    },
  ];

这是我的物品清单 我通过

访问它的“餐厅”

listOfItem.asMap().entries.map((e) => print(e.value['restaurants'])).toList();

我需要映射那个特定的列表 试了很久。我对此没有任何想法 顺便说一句，我是编码新手..

Answer 1

快速解答

您可以嵌套两个 JSON 数据映射：

listOfItem.map((category) => Column(
  children: (category['restaurants'] as List<Map<String, dynamic>>)
      .map((restaurant) => Text(restaurant['name'])).toList()
).toList();

记住使用toList() 作为map 操作不会返回List，而是返回Iterable。

基本完整解决方案

这是基于您的数据和Flutter Tabs 的第一个解决方案。

完整源代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: data.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Restaurants'),
          bottom: TabBar(
            tabs: data.map((category) => Tab(text: category['types'])).toList(),
          ),
        ),
        body: TabBarView(
          children: data
              .map((category) => ListView(
                    children:
                        (category['restaurants'] as List<Map<String, dynamic>>)
                            .map(
                              (restaurant) => ListTile(
                                title: Text(restaurant['name']),
                                subtitle: Text(restaurant['location']),
                              ),
                            )
                            .toList(),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

final data = [
  {
    "types": "ARABIAN",
    "restaurants": [
      {
        "name": "ZauZau Restaurants",
        "location": "Mascat, Oman",
        "kms": "1.0 kms"
      },
      {
        "name": "MauMau Restaurants",
        "location": "Calicut, Oman",
        "kms": "2.0 kms"
      },
      {
        "name": "ChaCha Restaurants",
        "location": "Charat, Oman",
        "kms": "2.5 kms"
      },
    ]
  },
  {
    "types": "COFFEE SHOP",
    "restaurants": [
      {
        "name": "ZauZau Restaurants",
        "location": "Mascat, Oman",
        "kms": "1.0 kms"
      },
    ]
  },
];

---

高级完整解决方案

这是第二个解决方案，提供完全相同的视觉效果，但管理特定的域实体Restaurant & RestaurantCategory。

它引入了状态管理和 JSON 序列化等概念。

完整源代码：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

part '66318447.tabs.freezed.dart';
part '66318447.tabs.g.dart';

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: HomePage(),
      ),
    ),
  );
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final data = useProvider(dataProvider).state;
    return DefaultTabController(
      length: data.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Restaurants'),
          bottom: TabBar(
            tabs: data.map((category) => Tab(text: category.name)).toList(),
          ),
        ),
        body: TabBarView(
          children: data
              .map((category) => ListView(
                    children: category.restaurants
                        .map(
                          (restaurant) => ListTile(
                            title: Text(restaurant.name),
                            subtitle: Text(
                                '${restaurant.location} (${restaurant.kms} away)'),
                          ),
                        )
                        .toList(),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

final dataProvider = StateProvider<List<RestaurantCategory>>(
    (ref) => data.map((json) => RestaurantCategory.fromJson(json)).toList());

@freezed
abstract class Restaurant with _$Restaurant {
  const factory Restaurant(String name, String location, String kms) =
      _Restaurant;

  factory Restaurant.fromJson(Map<String, dynamic> json) =>
      _$RestaurantFromJson(json);
}

@freezed
abstract class RestaurantCategory with _$RestaurantCategory {
  const factory RestaurantCategory(String name, List<Restaurant> restaurants) =
      _RestaurantCategory;

  factory RestaurantCategory.fromJson(Map<String, dynamic> json) =>
      _$RestaurantCategoryFromJson(json);
}

final data = [
  {
    "name": "ARABIAN",
    "restaurants": [
      {
        "name": "ZauZau Restaurants",
        "location": "Mascat, Oman",
        "kms": "1.0 kms"
      },
      {
        "name": "MauMau Restaurants",
        "location": "Calicut, Oman",
        "kms": "2.0 kms"
      },
      {
        "name": "ChaCha Restaurants",
        "location": "Charat, Oman",
        "kms": "2.5 kms"
      },
    ]
  },
  {
    "name": "COFFEE SHOP",
    "restaurants": [
      {
        "name": "ZauZau Restaurants",
        "location": "Mascat, Oman",
        "kms": "1.0 kms"
      },
    ]
  },
];

Answer 2

试试这个循环：

for (final x in listOfItem){
    //x is the current object here
    for (final y in x["restaurants"]){
        //y is the current restaurant
        print(y["property you want"]);
    }
}