选定内容后,下拉菜单不会更新(颤动)

时间:2020-06-30 17:01:26

标签: flutter dart dropdown

我试图在Flutter项目中创建一个DropDown菜单,但是当我按下一个值时,它的值没有改变。我尝试了几种不同的代码和教程,但是它似乎从未改变。这是我的代码:

    body: Container(
      padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
      child: Column(
        children: <Widget>[
          TextField(
            controller: myController,
            decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Title',
                hintText: 'What will you call your grocery list?'),
          ),
          Row(
            children: <Widget>[
              Text(
                'Remind me every ',
                style: GoogleFonts.biryani(fontSize: 15.0),
              ),
              new DropdownButton<String>(
                value: 'Wednesday',
                items: <String>[
                  'Sunday',
                  'Monday',
                  'Tuesday',
                  'Wednesday',
                  'Thursday',
                  'Friday',
                  'Saturday'
                ].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (_) {},
              ),
            ],
          )
        ],
      ),
    )

此外,此代码位于与文件主页分开的类中,该文件也是有状态的小部件。基本上,我将得到两个有状态的小部件,即主页和此页,并且它不会让我创建两个状态。这是它给我的错误:

The name 'createState' is already defined.
Try renaming one of the declarations.dartduplicate_definition

3 个答案:

答案 0 :(得分:0)

您正在对下拉按钮中的value参数进行硬编码,因此它永远不会更改。您需要在有状态窗口小部件类的开头创建一个变量,并像这样进行初始化

String value = "Wednesday";

不需要更改DropdownButton的值 onChanged ,然后调用setState来用新值更新Ui。 这就是您的有状态小部件类的样子

class _MyHomePageState extends State<MyHomePage> {
  String value = "Wednesday";
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
      padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              new DropdownButton<String>(
                value: value,
                items: <String>[
                  'Sunday',
                  'Monday',
                  'Tuesday',
                  'Wednesday',
                  'Thursday',
                  'Friday',
                  'Saturday'
                ].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (val) {
                  setState((){
                    this.value = val;
                  });
                },
              ),
            ],
          )
        ],
      )));
  }
}

答案 1 :(得分:0)

您必须在DropdownButton之外声明一个变量,然后将所选值设置为该变量。

这是一个样本

String _currentValue='Saturday';

 body: Container(
  padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
  child: Column(
    children: <Widget>[
      TextField(
        controller: myController,
        decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Title',
            hintText: 'What will you call your grocery list?'),
      ),
      Row(
        children: <Widget>[
          Text(
            'Remind me every ',
            style: GoogleFonts.biryani(fontSize: 15.0),
          ),
          new DropdownButton<String>(
            value: _currentValue,
            items: <String>[
              'Sunday',
              'Monday',
              'Tuesday',
              'Wednesday',
              'Thursday',
              'Friday',
              'Saturday'
            ].map((String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text(value),
              );
            }).toList(),
            onChanged: (_) {
              setState(() {
                  _selectedValue = _;
                });
            },
          ),
        ],
      )
    ],
  ),
)

答案 2 :(得分:0)

更新

-----------------------

只需使用两个单独且不同的Stateful小部件,一个用于页面,一个用于选择器,请选中此dartpad,以更好地了解如何将StatefulWidget拆分为两个单独的StatefulWidgets

https://dartpad.dev/b07af2a7d088caeb312e5fc0cf6c5f10

-----------------------

您已将HardWed编码为“星期三”值,应将其放在变量中,然后将其设置为on change方法,当然所有这些都应在StatefulWidget内完成,因为您正在管理状态

您的状态小部件

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

您的州

class _TestWidgetState extends State<TestWidget> {

  //Your String used for defining the selection**
  String _currentSelection = "Wednesday";

  //Your build method    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("DropDownSample"),
        ),
        body: Container(
          padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('Remind me every '),
                  DropdownButton<String>(
                    //Don't forget to pass your variable to the current value
                    value: _currentSelection,
                    items: <String>[
                      'Sunday',
                      'Monday',
                      'Tuesday',
                      'Wednesday',
                      'Thursday',
                      'Friday',
                      'Saturday'
                    ].map((String value) {
                      return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(value),
                      );
                    }).toList(),
                    //On changed update the variable name and don't forgot the set state!
                    onChanged: (newValue) {
                      setState(() {
                        _currentSelection = newValue;
                      });
                    },
                  ),
                ],
              )
            ],
          ),
        ));
  }
}

还要检查为什么在更新变量时应该使用setState;)https://flutter.dev/docs/development/ui/interactive