颤动中的下拉菜单答案

【问题标题】：Dropdown menu in flutter颤动中的下拉菜单
【发布时间】：2021-09-14 02:58:34
【问题描述】：

我尝试构建一个下拉按钮和一个菜单，其中的值将从下拉菜单中选择。代码如下：

String valueChoose;
 List listItem = ["A", "B", "C", "D", "E"];

DropdownButton(
 hint: Text('Associate'),
 dropdownColor: Colors.white,
 icon: Icon(Icons.arrow_drop_down),
 iconSize: 20.0,
 style: TextStyle(
 fontSize: 22.0,
 color: Colors.black,
 ),
 value: valueChoose,
 onChanged: (newValue) {
 setState(() {
 valueChoose = newValue;
 });
 },
 items: listItem.map((valueItem){
 return DropdownMenuItem(
  value: valueItem,
  child: Text(valueItem),
  );
  }).toList(),
 ),

我面临的错误处于设置状态，我已将newValue 分配给valueChoose。

A value of type 'Object?' can't be assigned to a variable of type 'String'.
Try changing the type of the variable, or casting the right-hand type to 'String'.

这是在设置状态下分配的 newValue 出现的错误。请对此提供帮助，在此先感谢！

以下是代码，包括 AlertDailog：

  class HomeScreen extends StatefulWidget {
   @override
   _HomeScreenState createState() => _HomeScreenState();
   }
    
   class _HomeScreenState extends State<HomeScreen> {
   String ? valueChoose;
    List listItem = [
        "A", "B", "C", "D", "E"
      ];
     void assignPopup(BuildContext context) {
     var alertDialog = AlertDialog(
      content: 
          Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
          Row(
          children:[
          Container(
          child: Text(
          'Action',
          ),
          ),
          ]
          ),
          Row(
          children:[
          Container(
          child: Card(
          elevation: 5.0,
          shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          ),
          child: TextField(
          decoration: InputDecoration(
          labelText: 'Please add any comments',
          ),
          ),
          ),
          ),
          ]
          ),
          Row(
          children:[
          Container(
          child: Text(
          'Assign To',
           ),
           ),
           ]
           ),
           Row(
           children: [
           Container(
           child: Card(
           elevation: 5.0,
           shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(10.0),
           ),
           child: DropdownButton<String>(
           hint: Text('Associate'),
           dropdownColor: Colors.white,
           icon: Icon(Icons.arrow_drop_down),
           iconSize: 40.0,
           style: TextStyle(
           fontSize: 18.0,
           color: Colors.black,
           ),
           value: valueChoose,
           onChanged: (newValue) {
           setState(() {
           valueChoose = newValue;
           });
           },
           items: listItem.map<DropdownMenuItem<String>>((valueItem){
           return DropdownMenuItem(
           value: valueItem,
           child: Text(valueItem),
            );
            }).toList(),
            ),
            ),
            ),
            ],
            ),
           ],
          ),
          );
          showDialog(
          context: context,
          builder: (BuildContext context) {
          return alertDialog;
           }
          );
        }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
              ...
              ...
         Container(
         child: TextButton(
         onPressed: (){
         assignPopup(context);
         },
         child: Text(
         'Assign',
          ),
          ),
          ),
         );
       }
      }

【问题讨论】：

标签： flutter dart dropdown

【解决方案1】：

根据您提供的数据，我创建了一个使用警报对话框的示例，其中有一个下拉列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String valueChoose;
  List listItem = ["A", "B", "C", "D", "E"];

  void assignPopup(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context, setState) {
            return AlertDialog(
              content: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Row(children: [
                    Container(
                      child: Text(
                        'Action',
                      ),
                    ),
                  ]),
                  Row(children: [
                    Expanded(
                      child: Container(
                        child: Card(
                          elevation: 5.0,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          child: TextField(
                            decoration: InputDecoration(
                              labelText: 'Please add any comments',
                            ),
                          ),
                        ),
                      ),
                    ),
                  ]),
                  Row(children: [
                    Container(
                      child: Text(
                        'Assign To',
                      ),
                    ),
                  ]),
                  Row(
                    children: [
                      Container(
                        child: Card(
                          elevation: 5.0,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          child: DropdownButton<String>(
                            hint: Text('Associate'),
                            dropdownColor: Colors.white,
                            icon: Icon(Icons.arrow_drop_down),
                            iconSize: 40.0,
                            style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.black,
                            ),
                            value: valueChoose,
                            onChanged: (newValue) {
                              setState(() {
                                valueChoose = newValue;
                              });
                            },
                            items: listItem
                                .map<DropdownMenuItem<String>>((valueItem) {
                              return DropdownMenuItem(
                                value: valueItem,
                                child: Text(valueItem),
                              );
                            }).toList(),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          });
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: TextButton(
            onPressed: () {
              assignPopup(context);
            },
            child: Text(
              'Assign',
            ),
          ),
        ),
      ),
    );
  }
}

因此，为了更改下拉列表值，您必须使用 StatefulBuilder 来更改您的下拉列表值。您可以查看上面的示例并根据需要进行更改。

请运行代码以检查所需的输出。

让我知道它是否有效。

【讨论】：

这与我在有状态构建器中使用它的方式相同，但我不知道错误在哪里。
能否请您添加您使用 statefullBuilder 使用的代码
从您发布的代码来看，它运行良好，请问您遇到了什么问题。
@yaminir 请检查代码，如果您遇到任何错误，请告诉我。
我已经按照您的要求进行了编辑，以及课程和弹出窗口小部件，请仔细检查。下拉列表仍然无法动态选择。

【解决方案2】：

指定DropdownButton和map的类型

String? valueChoose;
  List listItem = ["A", "B", "C", "D", "E"];

DropdownButton<String>(
            hint: Text('Associate'),
            dropdownColor: Colors.white,
            icon: Icon(Icons.arrow_drop_down),
            iconSize: 20.0,
            style: TextStyle(
              fontSize: 22.0,
              color: Colors.black,
            ),
            value: valueChoose,
            onChanged: (newValue) {
              setState(() {
                valueChoose = newValue;
              });
            },
            items: listItem.map<DropdownMenuItem<String>>((valueItem) {
              return DropdownMenuItem(
                value: valueItem,
                child: Text(valueItem),
              );
            }).toList(),
          )

【讨论】：

谢谢，我能够清除错误并运行它。但是有一个问题，我从下拉列表中选择的项目不能动态工作。我需要关闭弹出窗口并重新打开它以查看更改。你能帮忙吗？
我没有明白你的意思，但它对我来说很好。
我在AlertDialog 弹出窗口中使用了这个下拉菜单。因此，当我在下拉列表中选择项目时，我应该每次都重新打开对话框以查看选择的变化。
你能分享你的AlertDialog的代码吗？
将DropdownButton 或整个AlertDialog 移动到单独的Stateful 或Stateless 小部件中。

【解决方案3】：

在build 方法之外声明变量。

 String? valueChoose;
  List listItem = ["A", "B", "C", "D", "E"];

在 build 方法中添加 Dropdown 小部件，所以完整的状态类代码如下所示，

class _DropdownViewState extends State<DropdownView> {
  String? valueChoose;
  List listItem = ["A", "B", "C", "D", "E"];

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      hint: Text('Associate'),
      dropdownColor: Colors.white,
      icon: Icon(Icons.arrow_drop_down),
      iconSize: 20.0,
      style: TextStyle(
        fontSize: 22.0,
        color: Colors.black,
      ),
      value: valueChoose,
      onChanged: (String? newValue) {
        setState(() {
          valueChoose = newValue;
        });
      },
      items: listItem.map<DropdownMenuItem<String>>((valueItem){
        return DropdownMenuItem(
          value: valueItem,
          child: Text(valueItem),
        );
      }).toList(),
    );
  }

【讨论】：