flutter - Flutter:如何绘制 map 列表？

Question

我有一个非常简单的 map list 。

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(() {
      // ...
    });
  },
 ),
)

如何获取 map 的 key ，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),
      ),
    );
  }
}