flutter 中的下拉按鈕值在 onchange 事件期間未更改

Question

我是使用下拉按鈕的新手，但我從材料示例中復制了這段代碼，當我選擇不同的類別時，值沒有改變。 我不確定發生了什么，但是當我調試時值會在內部發生變化，但顯示的文本保持默認設置，即“選擇目標類別”。

DropdownButton<String>(
                   value: dropdownValue,
                   icon: Icon(Icons.check_circle_outline),
                   iconSize: 24,
                   elevation: 16,
                   style: TextStyle(
                  color: Colors.blue[300]
                  ),
                    underline: Container(
                    height: 2,
                    color: Colors.blue[300],
                 ),
                      onChanged: (String newValue) {
                       setState(() {
                      dropdownValue = newValue;
                       updateCategory(newValue);
             });
         },
                    items: <String>['Choose a goal category', 'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal']

                    .map<DropdownMenuItem<String>>((String value) {
                     return DropdownMenuItem<String>(
                     value: value,
                     child: Text(value),
                  );
                 })
            .toList(),
      ),

Answer 1

替換這個。

items : <String>['Choose a goal category', 'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal']
.map((String dropDownStringItem){
   return DropdownMenuItem<String>{
      value : dropDownStringItem,
      ...
   }
}).toList(),

我希望能幫助你

Answer 2

第一步：聲明String dropdownValue； 不設置值
第 2 步：使用提示並設置為 Text('Choose a goal category')
第 3 步：項目刪除字符串“選擇目標類別”

代碼片段

String dropdownValue;
...
DropdownButton<String>(              
              hint: Text('Choose a goal category'),
              value: dropdownValue,
              icon: Icon(Icons.check_circle_outline),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.blue[300],
              ),
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              items: <String>[
                'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal'
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),

完整代碼

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Center(
            child: DropdownButton<String>(
              //isDense: true,
              hint: Text('Choose a goal category'),
              value: dropdownValue,
              icon: Icon(Icons.check_circle_outline),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.blue[300],
              ),
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              items: <String>[
                'Financial', 'Physical', 'Family', 'Mental', 'Social', 'Spiritual', 'Personal'
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}