Flutter 中的索引堆叠。如何在所有其他小部件之上显示容器？答案

【问题标题】：Indexed Stacking in Flutter. How to display container above all other widgets?Flutter 中的索引堆叠。如何在所有其他小部件之上显示容器？
【发布时间】：2021-12-08 04:14:09
【问题描述】：

我尝试创建一个通知按钮，该按钮显示应用程序内的所有未读通知，我们如何从社交媒体应用程序中得知这些通知。

单击通知图标时，我想打开包含所有新通知的列表。

我的问题：我无法让堆叠工作。我正在使用Stack 小部件，但我需要列表容器浮动在所有其他小部件之上。它必须始终位于顶部。

它的样子

如您所见，蓝色容器并未位于所有小部件的前面。我们如何在 Flutter 中管理它以将其展示在大家面前？ CSS 中的 position: fixed; z-index: 9999 之类的东西。

我的代码

return Scaffold(
  backgroundColor: Get.theme.colorScheme.primary.darken(.05),
  body: Column(
    children: [
      SizedBox(
        height: 50,
        child: WindowTitleBarBox(
          child: MoveWindow(
            child: NotificationBar(),
          ),
        ),
      ),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MainNavigation(),
            Flexible(child: this.child!),
          ],
        ),
      ),
    ],
  ),
);


class NotificationBar extends StatelessWidget {
  const NotificationBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10, right: 35),
      alignment: Alignment.centerRight,
      child: Indexer(
        clipBehavior: Clip.none,
        children: [
          Icon(
            Icons.notifications,
            size: 25,
          ),
          Positioned(
            left: 12,
            bottom: 12,
            child: Badge(
              content: "2",
              minHeight: 5,
              minWidth: 12,
              fontSize: 7,
            ),
          ),
          Positioned(
            top: 30,
            right: 0,
            child: Container(
              clipBehavior: Clip.none,
              width: 300,
              height: 500,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

你有什么想法吗？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

试试Overlay:

ElevatedButton(
  child: Text('Overlay Test'),
  onPressed: () {
    final entry = OverlayEntry(
      builder: (context) => Positioned(
        bottom: 20,
        right: 20,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
    Overlay.of(context)?.insert(entry);
  },
)

要删除它，请致电entry.remove()。您可能希望将 entry 变量存储在更高的位置以便于访问，可能作为类成员变量。

【讨论】：