0

我正在尝试构建一个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;
                });
              }),
        ));
  }
}

4

1 回答 1

1

所以这段代码基本上有 3 个部分。首先是存储图标和标题的对象。第二个是这些对象的列表，您可以拥有任意数量的对象。第三个是按钮本身，它构造了盒子
OBJECT

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

这是创建按钮的最佳方式，因为您可以修改它而无需更改每一段代码

于 2020-10-01T15:41:45.953 回答