Flutter：如何使用 DropDownButton？

Question

我正在嘗試構建一個包含多個元素的DropdownButton小部件，但是即使我在 Internet 上閱讀了多個教程，我也失敗了。

我怎樣才能創建一個簡單的 4 個元素的 DropdownButton ？

謝謝你的時間

這是我嘗試過的：

 import 'package:flutter/material.dart'; class ForgotPassScreen extends StatefulWidget { @override _ForgotPassScreenState createState() => _ForgotPassScreenState(); } class _ForgotPassScreenState extends State<ForgotPassScreen> { int _value = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Dropdown Button"), ), body: Container( padding: EdgeInsets.all(20.0), child: DropdownButton( value: _value, items: [ DropdownMenuItem( child: Text("Item 0"), value: 0, ), DropdownMenuItem( child: Text("First Item"), value: 1, ), DropdownMenuItem( child: Text("Second Item"), value: 2, ), DropdownMenuItem( child: Text("Third Item"), value: 3, ), DropdownMenuItem( child: Text("Fourth Item"), value: 4, ) ], onChanged: (value) { setState(() { _value = value; }); }), )); } }

Answer 1

所以這段代碼基本上有 3 部分。 首先是存儲圖標和標題的對象。 第二個是這些對象的列表，您可以擁有任意數量的對象。 第三個是構建框的按鈕本身
目的

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

列表

List<Choice> choices = <Choice>[
      const Choice(title: 'Profile', icon: Icons.account_circle),
      const Choice(title:"Log in", icon: Icons.exit_to_app),
    ]

彈出按鈕

          PopupMenuButton<Choice>(
            color:Colors.white,
            onSelected: onItemMenuPress,
            itemBuilder: (BuildContext context) {
              return choices.map((Choice choice) {
                return PopupMenuItem<Choice>(
                    value: choice,
                    child: Row(
                      children: <Widget>[
                        Icon(
                          choice.icon,
                          color:Colors.black
                        ),
                        Container(
                          width: 10.0,
                        ),
                        Text(
                          choice.title,
                          style: TextStyle(),
                        ),
                      ],
                    ));
              }).toList();
            },
          )

這是創建按鈕的最佳方式，因為您可以修改它而無需更改每一段代碼