如何在flutter中将下拉按钮实现为函数

Question

我正在做一个公司项目。但我无法简单地了解如何在函数中实现基本的下拉按钮，但我似乎无法使下拉函数中的值发生变化，你认为我做错了什么这是我的代码：

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

用 StatefulBuilder 包装它就可以了。

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

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

我不知道

buildDropdownField

函数是否在类中，但没关系，我会提供这两种情况的解决方案。

班级内

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

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(),
        )
      ],
    );
  }
}

课外

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

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(),
        )
      ],
    );
  }
}

Answer 3

尝试下面的代码希望对您有所帮助。使用 StatefulBuilder 请参阅 此处

您的下拉功能：

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: '-',
    ),

结果->

选择后结果->