DropDownButton 不显示我选择的选项

Posted

技术标签:

【中文标题】DropDownButton 不显示我选择的选项【英文标题】:DropDownButton Does not show the option that I chose 【发布时间】:2021-09-04 23:33:06 【问题描述】:

我正在使用 Flutter,并计划制作一个下拉按钮供用户选择。选择其中一个选项后,它仍会显示提示,而不是用户选择的选项。

这是代码:

DropdownButton<String>(
              isExpanded: true,
              items: <String>['student', 'driver'].map((String value) 
                return DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              ).toList(),
              hint: new Text ("Select a Role"),
              onChanged: (value) => _role = value,
            ),

提前感谢您的帮助。

【问题讨论】:

【参考方案1】:

你应该喜欢这个

DropdownButton<String>(
              isExpanded: true,
              items: <String>['student', 'driver'].map((String value) 
                return DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              ).toList(),
              value:_role,
              hint: new Text ("Select a Role"),
              onChanged:  (value) => setState(()
                       _role = value
                   ),
            ),

【讨论】:

【参考方案2】:

您需要在onChanged 中调用setState。您必须将_role 分配给DropdownButtonvalue 属性。

这是我创建的DartPad。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  


class MyWidget extends StatefulWidget 
  @override
  _MyWidgetState createState() => _MyWidgetState();


class _MyWidgetState extends State<MyWidget> 
  
  String? _role = 'student';
  
  @override
  Widget build(BuildContext context) 
    return DropdownButton<String>(
      isExpanded: true,
      items: <String>['student', 'driver'].map((String value) 
        return DropdownMenuItem<String>(
          value: value,
          child: new Text(value),
        );
      ).toList(),
      value: _role,
      hint: new Text("Select a Role"),
      onChanged: (value) => setState(() => _role = value),
    );
  

【讨论】:

以上是关于DropDownButton 不显示我选择的选项的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动中手动显示/关闭 DropdownButton?

DropdownButton 选择调用 Flutter 中其他字段的 onValidate 函数

在 DropdownButton 中选择 Item 会导致 Flutter 抛出错误

Flutter DropdownButton 颜色与父 Widgets 相同

Flutter - 如何在小部件测试中选择 DropdownButton 项

Flutter:按钮下方的 DropDownButton 项