Flutter 上下文操作栏 (CAB)

Flutter 的上下文操作栏的变通方法。

whatsApp

CAB & Flutter

CAB 是一个顶部应用栏，它会替换应用程序的应用栏，为选定的项目提供上下文操作。在此处查看 Material Design 的实现和要求：这里

Flutter 尚不支持原生 CAB。请参阅问题
在 CAB 支持原生之前，这个包应该能为您提供一种优雅的方式在 Flutter 中实现上下文操作栏。

工作原理

  • ContextualScaffold 或 ContextualScrollView（适用于 slivers）
  • ContextualAppBar
  • ContextualAction
  • ContextualActionWidget

ContextualScaffold<?>

ContextualScaffold<?> 类似于常规的 Material Scaffold，只是它还需要一个
必需的 contextualAppBar。

ContextualScaffold<?>(
      contextualAppBar: ContextualAppBar(),
      appBar: AppBar(),
      body: Body(),
    )

您可以根据需要提供多个 ContextualScaffold

ContextualScrollView<?>

ContextualScrollView<?> 类似于常规的 NestedScrollview，只是它还需要一个必需的 contextualAppBar。

 ContextualScrollView<?>(
     contextualAppBar: ContextualAppBar(),
     headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [],
     body: Body(),
  )

ContextualScrollView 用于为 silvers 添加一流的支持，尽管 ContextualScaffold 也可以与 NestedScrollview 一起使用，请参阅 WhatsApp 示例以获取完整用法。

ContextualAppBar<?>

ContextualAppBar<?> 类似于常规的 Material Appbar，但它接受一个 counterBuilder 而不是 title，还接受一个 contextualActions 而不是 actions。

 ContextualAppBar(
      counterBuilder: (int itemsCount){
        return Text("$itemsCount Selected");
      },
      contextualActions: <ContextualAction>[],
    )

ContextualAction<?>

ContextualAction<?> 允许您通过 itemsHandler 回调来对选定的项目执行操作。

ContextualAction(
            itemsHandler: (List<?> items) {
              items.forEach((item) {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text("$item saved"),
                ));
              });
            },
            child: Icon(Icons.save),
          ),

ContextualActionWidget<?>

您可以在 ContextualActionScaffold 或 ContextualScrollView<?> 的 body 中的任何位置使用 ContextualActionWidget 来通知 ContextualActionScaffold 或 ContextualScrollView<?> 分别已选择一个项目，以便显示 ContextualAppBar。

   ContextualActionWidget(
          data: ?,
          child: ChildWidget(),
        )

注意：子 Widget 处理 onLongPress 非常重要。

深入了解 ContextualActionWidget<?>

ContextualActionWidget<?> 接受其他可选参数，例如

  • selectedColor
  • selectedWidget
  • unselectedWidget

selectedColor 是选定项目背景的颜色，如果未提供，则默认为 splash color。selectedColor 与 ListTile 配合效果很好。

selectedWidget 和 unselectedWidget 会被 叠加 在提供的子 Widget 之上。默认情况下，它们位于提供的子 Widget 的中心。
由于它们是叠加的，您可以使用 Row、Align、Positioned Widget 或任何其他 Widget 组合来将它们放置在所需位置。

当 ActionMode 启用且项目被选中时，selectedWidget 会显示；当 ActionMode 启用且项目未被选中时，unselectedWidget 会显示。请参阅下面的示例（status_saver）图片，其中 selectedWidget 和 unselectedWidget 都对齐到右上角。

status_saver

ActionMode

此上下文操作栏的变通方法不支持在 ActionMode 中零个项目。

  • 使用 ActionMode.addItem<?> 将项目添加到选定项目中。如果这是第一次选择，ActionMode 将被启用。

  • 使用 ActionMode.addItems<?> 添加项目列表。

  • 使用 ActionMode.disable<?> 禁用并取消选择所有选定项目。

  • 使用 ActionMode.enabledStream<?> 发出 true 或 false，分别表示操作模式是启用还是禁用。

注意：在大多数情况下，您无需使用 ActionMode.disable<?>，因为该包已在需要的地方为您处理了。

GitHub

https://github.com/De-Morgan/flutter-contextual-action-bar