Flutter中如何访问嵌套JSON文件里nutrient的name字段？

你之前的代码无法访问nutrient.name的核心原因是：foodNutrients是数组（List）类型，不是单个对象，不能直接通过['foodNutrients']['nutrient']的方式访问，必须先指定数组元素的索引，或者遍历整个数组。

方案1：显示第一个营养元素的名称 #

如果只需要展示foodNutrients数组里第一个元素的nutrient.name，可以修改ListTile的subtitle字段：

subtitle: Text(_items[index]['foodNutrients'][0]['nutrient']['name']),

方案2：显示所有营养元素的名称 #

如果需要展示该食物的全部营养名称，可以在Card内添加Column组件遍历foodNutrients数组：

return Card(
  margin: const EdgeInsets.all(10),
  child: Padding(
    padding: const EdgeInsets.all(12),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ListTile(
          leading: Text(_items[index]['foodClass']),
          title: Text(_items[index]['description']),
        ),
        const SizedBox(height: 8),
        const Text('营养成分：'),
        // 遍历数组，逐个渲染营养名称
        ...(_items[index]['foodNutrients'] as List).map((nutrientItem) {
          return Text('- ${nutrientItem['nutrient']['name']}');
        }).toList(),
      ],
    ),
  ),
);

完整修改后的代码片段 #

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart';

class HomeScreen2 extends StatefulWidget {
  const HomeScreen2({Key? key}) : super(key: key);

  @override
  State<HomeScreen2> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen2> {
  List _items = [];

  Future<void> readJson() async {
    final String response = await rootBundle.loadString('assets/database.json');
    final data = await json.decode(response);
    setState(() {
      _items = data["SRLegacyFoods"];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Database'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: readJson,
              child: const Text('Load Data'),
            ),
            _items.isNotEmpty
                ? Expanded(
                    child: ListView.builder(
                      itemCount: 3,
                      itemBuilder: (context, index) {
                        return Card(
                          margin: const EdgeInsets.all(10),
                          child: Padding(
                            padding: const EdgeInsets.all(12),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                ListTile(
                                  leading: Text(_items[index]['foodClass']),
                                  title: Text(_items[index]['description']),
                                ),
                                const SizedBox(height: 8),
                                const Text('营养成分：'),
                                ...(_items[index]['foodNutrients'] as List).map((nutrientItem) {
                                  return Text('- ${nutrientItem['nutrient']['name']}');
                                }).toList(),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  )
                : Container()
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Volker Deppe