Flutter：如何映射地圖列表？

Question

我有一個非常簡單的地圖列表。

List<Map<String, String>> items = [
    { 'a': 'Some Text' },
    { 'b': 'Another Text' },
];

我想將上面的列表映射到下拉列表。

DropdownButton<String>(
  hint: Text('Select a value'),
  items: items.map((item) {
    return DropdownMenuItem<String>(
      value: // how to get key here a, b
      child: // how to get value 'Some Text', 'Another Text'
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      // ...
    });
  },
 ),
)

如何獲取地圖的鍵， item 有一個屬性keys但沒有key和values而不是value 。

Answer 1

您可以在下面復制粘貼運行完整代碼
您需要使用DropdownButton<Map<String, String>>
您可以根據您的要求調整Text("${value.keys.first} ${value.values.first}")
代碼片段

DropdownButton<Map<String, String>>(
          value: dropdownValue,
          icon: Icon(Icons.arrow_downward),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (Map<String, String> newValue) {
            setState(() {
              dropdownValue = newValue;

              print(
                  "${dropdownValue.keys.first} ${dropdownValue.values.first}");
            });
          },
          items: items.map<DropdownMenuItem<Map<String, String>>>(
              (Map<String, String> value) {
            return DropdownMenuItem<Map<String, String>>(
              value: value,
              child: Text("${value.keys.first} ${value.values.first}"),
            );
          }).toList(),
        ),

工作演示

完整代碼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, String>> items = [
    {'a': 'Some Text'},
    {'b': 'Another Text'},
  ];

  Map<String, String> dropdownValue;

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<Map<String, String>>(
              value: dropdownValue,
              icon: Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: (Map<String, String> newValue) {
                setState(() {
                  dropdownValue = newValue;

                  print(
                      "${dropdownValue.keys.first} ${dropdownValue.values.first}");
                });
              },
              items: items.map<DropdownMenuItem<Map<String, String>>>(
                  (Map<String, String> value) {
                return DropdownMenuItem<Map<String, String>>(
                  value: value,
                  child: Text("${value.keys.first} ${value.values.first}"),
                );
              }).toList(),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 2

對於此特定輸入：

    List<Map<String, String>> items = [
        { 'a': 'Some Text' },
        { 'b': 'Another Text' },
    ];

您可以通過使用 getter 訪問所有鍵/值並像這樣定位其第一個元素來解決方法。

      DropdownButton<String>(
          items: items.map((item) {
            return DropdownMenuItem<String>(
              value: item.keys.first,
              child: Text(item.values.first),
            );
          }).toList(),
          onChanged: (value){},
        )