Flutter appBar：如何让appBar溢出到弹出菜单？

Question

Flutter 应用栏：

 Scaffold(
   appBar : AppBar(
      actions: [IconButton1 IconButton2 ... IconButtonN]
   ), 
   body:
 );


 IconButton1 IconButton2 ... IconButtonN

在狭窄的屏幕中，图标按钮列表会溢出。如何让溢出的按钮列表自动变成弹出菜单？

 IconButton1 IconButton2 PopupMenuButton
                         Item1
                         Item2
                          ...
                         ItemN

Answer 1

您可以使用小部件

PopupMenuButton

，

具体操作方法如下：

import 'package:flutter/material.dart';

class AppBarWithPopupMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Bar with Popup Menu'),
        actions: [
          PopupMenuButton<String>(
            icon: Icon(Icons.more_vert),
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem<String>(
                  value: 'option1',
                  child: Text('Option 1'),
                ),
                PopupMenuItem<String>(
                  value: 'option2',
                  child: Text('Option 2'),
                ),
                // ... add more options
              ];
            },
            onSelected: (String value) {
              // Handle selected option
              if (value == 'option1') {
                // Handle Option 1
              } else if (value == 'option2') {
                // Handle Option 2
              }
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Content goes here'),
      ),
    );
  }
}

在此示例中，我们在 AppBar 中添加了一个 PopupMenuButton 作为操作。 AppBar 的 actions 属性采用一个小部件列表，因此您可以将任何其他小部件与 PopupMenuButton 一起包含在内。 PopupMenuButton 在点击时提供一个下拉菜单，您可以使用 itemBuilder 属性定义其项目。当用户从弹出菜单中选择一个项目时，将调用 onSelected 回调。