下拉按钮<string>不改变 onChanged 的值</string>

Question

我正在使用 DropDownButton，我创建了一个 showModalBottomSheet，每当我按下 Add 按钮时都会调用它。 在这些工作表中，我插入了一些文本字段和一个 dropDownButton。 此表中的数据将发送到 Firestore。
我可以成功创建 DropDownButton。 但是当按下它时，它不会更改为我选择的值。
function：

void _CreateButtons(context){

    TextEditingController _buttonName = TextEditingController();
    TextEditingController _comodoName = TextEditingController();
    String _iconName;
    var _icons = ['None', 'Lock', 'LightBulb', 'Check', 'Cold', 'Alarm', 'Television', 'Bed'];
    var _formKey = GlobalKey<FormState>();

    showModalBottomSheet(context: context, builder: (BuildContext bc){
      return Center(
        child: Container(
          color: Colors.black.withOpacity(0.3),
          height: MediaQuery.of(context).size.height * 0.6,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
            child: Column(
              children: [
                Form(
                  key: _formKey,
                    child: Column(
                      children: [
                        TextFormField(
                        maxLines: 1,
                        maxLength: 10,
                        controller: _buttonName,
                        textAlign: TextAlign.center,
                        decoration: InputDecoration(
                          hintText: "Button name",
                          enabledBorder: OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            borderSide: new BorderSide(),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            borderSide: new BorderSide(color: Colors.blue),
                          ),
                        ),
                        validator: (val){
                        if (val.length == 0){
                          return "Button name cannot be empty";
                        }else{
                          return null;
                        }
                        },
                      ),
                      SizedBox(height: 20),
                      TextFormField( 
                        maxLines: 1,
                        maxLength: 20,                       
                        textAlign: TextAlign.center,
                        controller: _comodoName,
                        decoration: new InputDecoration(
                          hintText: "Room name",
                          enabledBorder: OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            borderSide: new BorderSide(),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            borderSide: new BorderSide(color: Colors.blue),
                          ),
                        ),
                        validator: (val){

                        },
                      ),
                    ],
                  ),
                ),
                DropdownButton<String>(
                  items: _icons.map((String dropDownStringItem) {
                    return DropdownMenuItem<String>(
                      value: dropDownStringItem,
                      child: Row(
                        children: [
                          Icon(getIconData(dropDownStringItem)),
                          Text(dropDownStringItem),
                        ],
                      ),
                    );
                  }).toList(),

                  onChanged: (String name){
                    setState(() {
                      _iconName = name;
                    });
                  },
                  value: _iconName,
                ),

我在分阶段小部件中将此称为 function：

Padding(
                  padding: EdgeInsets.only(left: screenSize/1.2, top: screenSize*1.7),
                  child: FloatingActionButton(
                    backgroundColor: Color(0xFF0F52BA),
                    onPressed: (){
                      _CreateButtons(context);
                    },
                    child: Icon(Icons.add),
                  )
                ),

_CreateButtons 位于 Stageful 小部件内。

Answer 1

问题是您使用了 function 来呈现 UI 并存储 state。 但是当您调用setstate时，它会重建 StatefulWidget 的所有 UI。 这就是为什么您的 function - _CreateButtons再次以相同的值调用的原因。 这就是为什么，您应该将所有底部工作表代码添加到不同的StatefulWidget以正确处理状态。

1. 将您的代码移动到任何 StatefulWidget：

class MyCustomBottomSheet extends StatefulWidget {
  createState() => _MyCustomBottomSheetState();
}

class _MyCustomBottomSheetState extends State<MyCustomBottomSheet> {
  
    TextEditingController _buttonName = TextEditingController();
    TextEditingController _comodoName = TextEditingController();
    String _iconName;
    var _icons = ['None', 'Lock', 'LightBulb', 'Check', 'Cold', 'Alarm', 'Television', 'Bed'];
    var _formKey = GlobalKey<FormState>();
  
  Widget build(BuildContext context) {
    return Center(/// UI codes of build buttons);
  }
}

2. 并在按下FloatingActionButton时调用此小部件，如下所示：

 FloatingActionButton(
                    backgroundColor: Color(0xFF0F52BA),
                    onPressed: () => showModalBottomSheet(context: context, builder: (ctx) => MyCustomBottomSheet()),
                    child: Icon(Icons.add),
          
                )