flutter - Flutter DropDownButton - 当下拉按钮被禁用时如何显示选定的值？

Question

Flutter DropdownButton 显示了一些奇怪的行为：disabledHint当它被禁用时它显示小部件而不是选定的值（必须通过设置onChanged为 null 来完成）。

如何显示选定的值？

这是我的示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DropdownButton disable problem',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _enabled = true;
  int value;
  List<DropdownMenuItem<int>> items = [
    DropdownMenuItem(
      value: 11,
      child: Text('asdf'),
    ),
    DropdownMenuItem(
      value: 27,
      child: Text('qwert'),
    ),
    DropdownMenuItem(
      value: 31,
      child: Text('yxcv'),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropdownButton problem'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              'Disabling the DropdownButton looses its selection',
            ),
            Switch(
              onChanged: (v) => setState(() {
                _enabled = v;
              }),
              value: _enabled,
            ),
            DropdownButton(
              items: items,
              onChanged: _enabled
                  ? (v) => setState(() {
                        value = v;
                      })
                  : null,
              value: value,
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

如果您将Listof 项目作为 a ListofMap并DropdownMenuItems从中生成，您将更容易识别选择的内容并将其设置为disabledHint：

class DropdownProblem extends StatefulWidget {
  @override
  _DropdownProblemState createState() => _DropdownProblemState();
}

class _DropdownProblemState extends State<DropdownProblem> {
  bool _enabled = true;
  int value;

  List<Map> _items = [
    {
      "value": 11,
      "text": 'asdf'
    },
    {
      "value": 27,
      "text": 'qwert'
    },
    {
      "value": 31,
      "text": 'yxcv'
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropdownButton problem'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              'Disabling the DropdownButton looses its selection',
            ),
            Switch(
              onChanged: (v) => setState(() {
                _enabled = v;
              }),
              value: _enabled,
            ),
            DropdownButton(
              disabledHint: value != null
                ? Text(_items.firstWhere((item) => item["value"] == value)["text"])
                : null,
              items: _items.map((item) => DropdownMenuItem(
                value: item["value"],
                child: Text(item["text"]),
              )).toList(),
              onChanged: _enabled
                ? (v) => setState(() {
                  value = v;
                })
                : null,
              value: value,
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

来自flutter dropDown api docs：

If the onChanged callback is null or the list of items is null then the dropdown 
button will be disabled, i.e. its arrow will be displayed in grey and it will not 
respond to input. A disabled button will display the disabledHint widget if it is non-
null. However, if disabledHint is null and hint is non-null, 
the hint widget will instead be displayed.`