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