如何在 Flutter 中模拟 Android 的 showAsAction="ifRoom"？

Question

在我的 Flutter 应用程序中，我有一个屏幕，它是一个带有 Scaffold 小部件的 MaterialApp。

此 Scaffold 的 appBar 属性是一个 AppBar 小部件，其中包含填充了一些操作的操作属性和一个用于容纳其余选项的弹出菜单。

据我所知，AppBar actions 列表的子项可以是通用小部件（它将作为操作添加）或 PopupMenuButton 的实例，在这种情况下它将添加特定于平台的图标，触发时会打开 AppBar 弹出菜单。

在原生 Android 上不是这样。我只需要膨胀一个充满菜单项的菜单，每个项目都可以强制成为一个动作，强制不是一个动作或者具有特殊值 "ifRoom" ，这意味着 "be an action if there is space, otherwise be an item inside de popup menu".

在 Flutter 中有没有一种方法可以实现这种行为而不必编写复杂的逻辑来填充 AppBar 的 "actions" 属性？

我查看了 AppBar 和 PopupMenuButton 文档，但到目前为止没有任何内容解释如何做这样的事情。我可以模拟这种行为，但是我必须实际编写一个例程来计算可用的 space 并相应地构建 "actions" 列表。

这是一个典型的 Android 菜单，它混合了操作和弹出菜单条目。请注意，如果有空间，"load_game" 条目可以是一个操作，如果没有空间，它将成为一个菜单条目。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/new_game"
          android:icon="@drawable/ic_new_game"
          android:title="@string/new_game"
          android:showAsAction="always"/>
    <item android:id="@+id/load_game"
          android:icon="@drawable/ic_load_game"
          android:title="@string/load_game"
          android:showAsAction="ifRoom"/>
    <item android:id="@+id/help"
          android:icon="@drawable/ic_help"
          android:title="@string/help"
          android:showAsAction="never" />
</menu>

另一方面，在 Flutter 中，我必须提前决定选项是动作还是菜单项。

AppBar(
  title: Text("My Incredible Game"),
  primary: true,
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.add),
      tooltip: "New Game",
      onPressed: null,
    ),
    IconButton(
      icon: Icon(Icons.cloud_upload),
      tooltip: "Load Game",
      onPressed: null,
    ),
    PopupMenuButton(
      itemBuilder: (BuildContext context) {
        return <PopupMenuEntry>[
          PopupMenuItem(
            child: Text("Help"),
          ),
        ];
      },
    )
  ],
)

我希望 AppBar 实际上只有一个 "action" 属性而不是 "actions"。属性只是一个允许我拥有任何东西的小部件，所以如果我只想要一个操作列表，那么一个充满 IconButton 的行就足够了。

此外，PopupMenuButton 中的每个 PopupMenuItem 都会有一个 "showAsAction" 属性。如果 PopupMenuButton 中的一个或多个 PopupMenuItem 被检查为动作或 "ifRoom" 并且有空间，则 PopupMenuButton 将水平扩展并将这些项目作为动作放置。

Answer 1

这不受开箱即用的支持，但您可以复制该行为。我创建了以下小部件：

import 'package:flutter/material.dart';

class CustomActionsRow extends StatelessWidget {
  final double availableWidth;
  final double actionWidth;
  final List<CustomAction> actions;

  const CustomActionsRow({
    @required this.availableWidth,
    @required this.actionWidth,
    @required this.actions,
  });

  @override
  Widget build(BuildContext context) {
    actions.sort(); // items with ShowAsAction.NEVER are placed at the end

    List<CustomAction> visible = actions
        .where((CustomAction customAction) => customAction.showAsAction == ShowAsAction.ALWAYS)
        .toList();

    List<CustomAction> overflow = actions
        .where((CustomAction customAction) => customAction.showAsAction == ShowAsAction.NEVER)
        .toList();

    double getOverflowWidth() => overflow.isEmpty ? 0 : actionWidth;

    for (CustomAction customAction in actions) {
      if (customAction.showAsAction == ShowAsAction.IF_ROOM) {
        if (availableWidth - visible.length * actionWidth - getOverflowWidth() > actionWidth) { // there is enough room
          visible.insert(actions.indexOf(customAction), customAction); // insert in its given position
        } else { // there is not enough room
          if (overflow.isEmpty) {
            CustomAction lastOptionalAction = visible.lastWhere((CustomAction customAction) => customAction.showAsAction == ShowAsAction.IF_ROOM, orElse: () => null);
            if (lastOptionalAction != null) {
              visible.remove(lastOptionalAction); // remove the last optionally visible action to make space for the overflow icon
              overflow.add(lastOptionalAction);
              overflow.add(customAction);
            } // else the layout will overflow because there is not enough space for all the visible items and the overflow icon
          } else {
            overflow.add(customAction);
          }
        }
      }
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        ...visible.map((CustomAction customAction) => customAction.visibleWidget),
        if (overflow.isNotEmpty) PopupMenuButton(
          itemBuilder: (BuildContext context) => [
            for (CustomAction customAction in overflow) PopupMenuItem(
              child: customAction.overflowWidget,
            )
          ],
        )
      ],
    );
  }
}

class CustomAction implements Comparable<CustomAction> {
  final Widget visibleWidget;
  final Widget overflowWidget;
  final ShowAsAction showAsAction;

  const CustomAction({
    this.visibleWidget,
    this.overflowWidget,
    @required this.showAsAction,
  });

  @override
  int compareTo(CustomAction other) {
    if (showAsAction == ShowAsAction.NEVER && other.showAsAction == ShowAsAction.NEVER) {
      return 0;
    } else if (showAsAction == ShowAsAction.NEVER) {
      return 1;
    } else if (other.showAsAction == ShowAsAction.NEVER) {
      return -1;
    } else {
      return 0;
    }
  }
}

enum ShowAsAction {
  ALWAYS,
  IF_ROOM,
  NEVER,
}

您需要指明所有图标（包括溢出图标）的总可用宽度，以及每个操作的宽度（它们都需要具有相同的宽度）。这是一个使用它的例子：

return Scaffold(
  appBar: AppBar(
    title: const Text("Title"),
    actions: <Widget>[
      CustomActionsRow(
        availableWidth: MediaQuery.of(context).size.width / 2, // half the screen width
        actionWidth: 48, // default for IconButtons
        actions: [
          CustomAction(
            overflowWidget: GestureDetector(
              onTap: () {},
              child: const Text("Never 1"),
            ),
            showAsAction: ShowAsAction.NEVER,
          ),
          CustomAction(
            visibleWidget: IconButton(
              onPressed: () {},
              icon: Icon(Icons.ac_unit),
            ),
            showAsAction: ShowAsAction.ALWAYS,
          ),
          CustomAction(
            visibleWidget: IconButton(
              onPressed: () {},
              icon: Icon(Icons.cancel),
            ),
            overflowWidget: GestureDetector(
              onTap: () {},
              child: const Text("If Room 1"),
            ),
            showAsAction: ShowAsAction.IF_ROOM,
          ),
          CustomAction(
            visibleWidget: IconButton(
              onPressed: () {},
              icon: Icon(Icons.ac_unit),
            ),
            showAsAction: ShowAsAction.ALWAYS,
          ),
          CustomAction(
            visibleWidget: IconButton(
              onPressed: () {},
              icon: Icon(Icons.cancel),
            ),
            overflowWidget: GestureDetector(
              onTap: () {},
              child: const Text("If Room 2"),
            ),
            showAsAction: ShowAsAction.IF_ROOM,
          ),
          CustomAction(
            overflowWidget: GestureDetector(
              onTap: () {},
              child: const Text("Never 2"),
            ),
            showAsAction: ShowAsAction.NEVER,
          ),
        ],
      ),
    ],
  ),
);

请注意，我没有添加任何断言，但您应该始终为 showAsAction 为 ALWAYS 或 IF_ROOM 的操作提供 visibleWidget，并且始终为 showAsAction 为 IF_ROOM 或 NEVER.

的操作提供 overflowWidget

下面是使用上面代码的结果：

您可以根据您的要求自定义 CustomActionsRow，例如您可能有不同宽度的操作，在这种情况下您希望每个 CustomAction 提供自己的宽度等。

如何在 Flutter 中模拟 Android 的 showAsAction="ifRoom"？

How to emulate Android's showAsAction="ifRoom" in Flutter?

android

dart

menu

flutter

menuitem