如何制作显示选项列表的图标按钮

Question

向所有为初学者贡献知识的开发人员致以问候，我想知道如何制作一个将托管在应用程序栏中的按钮，当我触摸它时，它会显示一些选项，其中有一个图标和一个文本，当我触摸其中一个选项时，我会发送到新视图，如下图所示。

Answer 1

了解更多关于下拉按钮

这只是一个例子，在DartPad中测试：

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: MyHomePage(), debugShowCheckedModeBanner: false));

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

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

class _MyHomePageState extends State<MyHomePage> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ExampleDropDown"),
        actions: [
          DropdownButton(
            icon: Icon(Icons.arrow_downward),
            onChanged: (String? newValue) {
              setState(() {
                dropdownValue = newValue!;
              });
            },
            items: <String>['One', 'Two', 'Free', 'Four']
                .map<DropdownMenuItem<String>>(
              (String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              },
            ).toList(),
          ),
        ],
      ),
      body: Center(child: Text("Example")),
    );
  }
}

Answer 2

结果在这里 -> https://stackoverflow.com/a/66602001/17798537

使用弹出菜单按钮

Answer 3

您可以尝试使用 PopupMenuButton

尝试使用下面的代码片段

class MyPage extends StatelessWidget {
final GlobalKey<PopupMenuButtonState<int>> _key = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    actions: [
      PopupMenuButton<int>(
        key: _key,
        itemBuilder: (context) {
          return <PopupMenuEntry<int>>[
            PopupMenuItem(child: Text('0'), value: 0),
            PopupMenuItem(child: Text('1'), value: 1),
          ];
        },
      ),
    ],
  ),
  body: RaisedButton(
    onPressed: () => _key.currentState.showButtonMenu(),
    child: Text('Open/Close menu'),
  ),
);
}
}

希望对你有帮助

Answer 4

这是您可以替换为 IconButton

的示例

DropdownButton(
        icon: Icon(Icons.more_vert_sharp),
        onChanged: (String? newValue) {
          setState(() {
            dropdownValue = newValue!;
          });
        },
        items: <String>['One', 'Two', 'Free', 'Four']
            .map<DropdownMenuItem<String>>(
          (String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          },
        ).toList(),
      ),