Flutter DropDownButton - Как отобразить выбранное значение, когда выпадающая кнопка отключена? - PullRequest
Новая
       67

Flutter DropDownButton - Как отобразить выбранное значение, когда выпадающая кнопка отключена?

1 голос
/ 29 января 2020

Flutter DropdownButton показывает какое-то странное поведение: он отображает виджет disabledHint вместо выбранного значения, когда его отключают (что необходимо сделать, установив onChanged в ноль).

Как отобразить выбранное значение?

Вот мой пример кода: 

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,
            )
          ],
        ),
      ),
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Из трепетания 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.`
0 голосов
/ 29 января 2020

Если у вас есть List элементов в виде List из Map и вы генерируете 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,
            )
          ],
        ),
      ),
    );
  }
}
...