如何在 flutter 中将下拉按钮实现到 function

Question

我正在做一个公司项目。 但我不能简单地了解如何在 function 中实现基本下拉按钮，但我似乎无法在下拉 function 中更改值，您认为我做错了什么，这是我的代码：

Widget buildDropdownField({
  required String dropdownHeader,
    required String dropdownValue
}){
    return Column(
      children: <Widget>[
        Text(dropdownHeader),
        const SizedBox(height: 10,),
        //dropdownField
        DropdownButton<String>(
        value: dropdownValue,
        icon: const Icon(Icons.arrow_downward),
        elevation: 16,
        style: const TextStyle(color: Colors.deepPurple),
        underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
        ),
        onChanged: (String? newValue) {
        setState(() {
        dropdownValue = newValue!;
        });
        },
        items: <String>['-', 'Geçti', 'Kaldı', 'Belirsiz']
        .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
    value: value,
    child: Text(value),
    );
    }).toList(),
    )

      ],
    );
  }

Answer 1

试试这个它会工作

Widget buildDropdownField(
      {required String dropdownHeader, required String dropdownValue}) {
    return Column(
      children: <Widget>[
        Text(dropdownHeader),
        const SizedBox(
          height: 10,
        ),
        StatefulBuilder(
          builder: (_, setDropState) {
            return DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              elevation: 16,
              style: const TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: (String? newValue) {
                setDropState(() {
                  dropdownValue = newValue!;
                });
              },
              items: <String>['-', 'Geçti', 'Kaldı', 'Belirsiz']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            );
          },
        )
      ],
    );
  }

Answer 2

试试下面的代码希望它对你有帮助。 使用StatefulBuilder参考这里

您的下拉列表 function：

buildDropdownField({
  required String dropdownHeader,
  required String dropdownValue,
}) {
  return Column(
    children: <Widget>[
      Text(dropdownHeader),
      const SizedBox(
        height: 10,
      ),
      //dropdownField
      StatefulBuilder(builder: (context, StateSetter setState) {
        return DropdownButton<String>(
          value: dropdownValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>['-', 'Geçti', 'Kaldı', 'Belirsiz']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        );
      })
    ],
  );
}

您的小部件：

buildDropdownField(
      dropdownHeader: 'dropdownHeader',
      dropdownValue: '-',
    ),

结果->

选择后的结果->

Answer 3

首先，您不应该使用新值更新参数。 它确实更新了参数，但 function 仍会从它的调用中获取值。

我不知道buildDropdownField function 是否在 class 内，但没关系，我将为这两种情况提供解决方案。

Class内

您需要在函数之外的 class 中创建一个变量。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _dropDownValue = '-';

  Widget buildDropdownField({required String dropdownHeader}) {
    return Column(
      children: <Widget>[
        Text(dropdownHeader),
        const SizedBox(
          height: 10,
        ),
        //dropdownField
        DropdownButton<String>(
          value: _dropDownValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? newValue) {
            setState(() {
              _dropDownValue = newValue!;
            });
          },
          items: <String>['-', 'Geçti', 'Kaldı', 
  'Belirsiz'].map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        )
      ],
    );
  }
}

Class外

您需要将其转换为 Stateful Widget 才能更改下拉文本。 一旦下拉列表是一个有状态的小部件，您可以使用上面的解决方案或回调来对父 class 进行更改。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _dropDownValue = '-';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: DropDownWidget(
          dropdownHeader: 'Name',
          dropdownValue: _dropDownValue,
          onChanged: (String? newValue) {
            setState(() {
              _dropDownValue = newValue!;
            });
          },
        ),
      ),
    );
  }
}

class DropDownWidget extends StatefulWidget {
  final String dropdownHeader;
  final String dropdownValue;
  final Function(String?)? onChanged;

  DropDownWidget({required this.dropdownHeader, required this.dropdownValue, this.onChanged, Key? key}) : super(key: key);

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

class _DropDownWidgetState extends State<DropDownWidget> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(widget.dropdownHeader),
        const SizedBox(
          height: 10,
        ),
        //dropdownField
        DropdownButton<String>(
          value: widget.dropdownValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: widget.onChanged,
          items: <String>['-', 'Geçti', 'Kaldı', 'Belirsiz'].map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        )
      ],
    );
  }
}