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

这是创建按钮的最佳方法，因为您可以修改按钮而不必更改每一段代码

Flutter：如何使用DropDownButton？

1 个答案: