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

Posted 2023-02-23

【中文标题】Flutter 中的索引堆叠。如何在所有其他小部件之上显示容器？

【英文标题】：Indexed Stacking in Flutter. How to display container above all other widgets?

【发布时间】：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,
            ),
          ),
        ],
      ),
    );
  

你有什么想法吗？

【参考方案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 变量存储在更高的位置以便于访问，可能作为类成员变量。