抽屜串列僅顯示json物件中的一項關鍵項

我能夠menu用鍵值顯示鍵的第一個物件，但我不能在小部件內Books顯示第二個物件鍵值。我抓住以下 json 物件：AuthorsDrawer()

{
  "data": {
    "user" : "user1",
    "menu": [
      {
        "label": "Books",
        "view": "books"
      },
      {
        "label": "Authors",
        "view": "authors"
      }


    ]
  }
}

我使用以下方法獲取這個 json 物件：

class TestData {
  Future<Map<String, dynamic>> getTestData() async {
    String jsonData =
        await rootBundle.loadString('assets/test_json/test_json1.json');
    Map<String, dynamic> data = jsonDecode(jsonData);
    return data;
  }
}

而且我還從小部件內抓取的 json 物件中查看了menu帶有鍵的串列：labelDrawer()

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

  @override
  _MenuState createState() => _MenuState();
}

class _MenuState extends State<Menu> {
  late Map<String, dynamic> grabbedData = {};

  setTestData() async {
    await TestData()
        .getTestData()
        .then((result) => setState(() => grabbedData = result));
  }

  @override
  initState() {
    setTestData();
  }

  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> data = grabbedData;
    return Drawer(
        child: ListView(padding: EdgeInsets.zero, children: [
      DrawerHeader(
          child: Center(
        child: Container(),
      )),
      Column(
        children: [
          ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: data.keys.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  onTap: () {},
                  title: Center(
                    child: Column(
                      children: [
                        Text(
                          data["data"]["menu"][index]["label"],
                          style: TextStyle(fontSize: 20, color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                );
              }),
        ],
      ),
    ]));
  }
}

但問題是Drawer只顯示第一個帶有鍵值的物件Books。我知道它與 key 有關，itemCount: data.keys.length但我不知道從 key 顯示所有物件的正確方法menu。

uj5u.com熱心網友回復：

像這樣設定您的專案計數

 itemCount: grabbedData.containsKey("data")
              ? (grabbedData["data"]["menu"] as List<Map<String, dynamic>>)
                  .length
              : 0,

在你的小部件中像這樣

Text(
                (grabbedData["data"]["menu"] as List<Map<String, dynamic>>)[index]["label"],
                style: TextStyle(fontSize: 20, color: Colors.black),
              )

示例代碼

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

ImagePicker? picker;

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class TestData {
  Future<Map<String, dynamic>> getTestData() async {
    var jsonData = {
      "data": {
        "user": "user1",
        "menu": [
          {"label": "Books", "view": "books"},
          {"label": "Authors", "view": "authors"}
        ]
      }
    };
    // await rootBundle.loadString('assets/test_json/test_json1.json');
    // Map<String, dynamic> data = jsonDecode(jsonData);
    return jsonData;
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MySQL Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(drawer: Menu(), body: Container()),
    );
  }
}

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

  @override
  _MenuState createState() => _MenuState();
}

class _MenuState extends State<Menu> {
  Map<String, dynamic> grabbedData = {
    "data": {
      "user": "user1",
      "menu": [
        {"label": "Books", "view": "books"},
        {"label": "Authors", "view": "authors"}
      ]
    }
  };

  setTestData() async {
    await TestData()
        .getTestData()
        .then((result) => setState(() => grabbedData = result));
  }

  @override
  initState() {
    setTestData();
  }

  @override
  Widget build(BuildContext context) {
    // Map<String, dynamic> data = grabbedData;
    // var data2 = data["data"]["menu"] as List<Map<String, dynamic>>;
    return Drawer(
        child: ListView(padding: EdgeInsets.zero, children: [
      DrawerHeader(
          child: Center(
        child: Container(),
      )),
      ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount:  (grabbedData["data"]["menu"] as List<Map<String, dynamic>>).length,
          itemBuilder: (BuildContext context, int index) {
            // print(index);
            // print((grabbedData["data"]["menu"] as List<Map<String, dynamic>>).length);

            return ListTile(
              onTap: () {},
              title: Text(
                (grabbedData["data"]["menu"] as List<Map<String, dynamic>>)[index]["label"],
                style: TextStyle(fontSize: 20, color: Colors.black),
              ),
            );
          }),
    ]));
  }
}

標籤：扑 镖

上一篇：在顫動中單擊 按鈕時如何滾動？

下一篇：顫振|將價值從孩子傳遞給父母