Flutter中自定义下拉小部件如何实现setState答案

【问题标题】：Custom dropdown widget in Flutter how to implement setStateFlutter中自定义下拉小部件如何实现setState
【发布时间】：2020-10-15 11:25:06
【问题描述】：

我实现了一个自定义 DropdownButton 小部件，但我不知道如何实现它的 setState。我想将 items 和 selectedItem 传递给小部件，并让它处理它自己的状态。并在 myDropdownButton.selectedItem 需要时检索所选项目。我该如何实现它？

class MyDropdownButton extends StatefulWidget {
  final String selected;
  final List<MyDropdownItem> items;

  MyDropdownButton({Key key, this.selected, this.items})
      : super(key: key);

@override
  _MyDropdownButtonState createState() => _MyDropdownButtonState();
}

class _MyDropdownButtonState extends State<MyDropdownButton> {
  Widget build(BuildContext context) {
  return DropdownButtonFormField(
  value: widget.selected,
  onChanged: (String value) {
            widget.selected = value;
            },

但是选择的是最终的，不能修改。如何实现？

谢谢！

【问题讨论】：

标签： flutter widget

【解决方案1】：

这里有两个问题：

使用 setState 更新小部件。
通过回调将值传递回使用下拉菜单的小部件。 Medium Article on callbacks

首先要更新下拉列表，您需要在值更改时调用 setstate。但首先，您需要接收传递的值，通常这是在 initstate 中完成的。

其次，需要使用回调函数。然后调用这个小部件/类的类可以接收和处理该值

class MyDropdownButton extends StatefulWidget {
  final String selected;
  final List<MyDropdownItem> items;
  
  final Function(String) valueReturned; //callback function

  MyDropdownButton({Key key, this.selected, this.items, this.valueReturned})
      : super(key: key);

@override
  _MyDropdownButtonState createState() => _MyDropdownButtonState();
}

class _MyDropdownButtonState extends State<MyDropdownButton> {
  String sel;
  @override
  void initState() { 
    super.initState();
    sel = widget.selected; //get the value passed
  }
  Widget build(BuildContext context) {
  return DropdownButtonFormField(
  value: sel
  onChanged: (String value) {
    setState() {
            sel = value;
            widget.valueReturned(value); //this will trigger the callback function
            },
      }

在调用小部件的代码中，您需要监听并处理响应。

Container(
  child: MyDropdownButton(items: items, selected: selected, valueReturned: _handleValueReturned))

_handleValueReturned(String value) {
    thingToUpdate = value;
}

【讨论】：

【解决方案2】：

定义一个局部变量并在initState()中初始化：

String _selected;

@override
void initState() { 
  super.initState();
  _selected = widget.selected; 
}

使用 setState 在选择更改时更新您的局部变量：

onChanged: (String value) {
  setState(() {_selected = value;})
}

要检索值，请在您的类中定义一个 getter：

String get selectedItem => _selected;

然后您可以使用myDropdownButton.selectedItem 访问所选项目。

有关隐式和显式 getter/setter 的更详细说明，请参阅How do getters and setters change properties in Dart?

【讨论】：

但是从父页面我无法访问 State 类属性。只有类的属性。