如何在Flutter中将小部件放置在模态障碍物之上？

Question

我有一个设计，其中包含多个列和多个小部件。

当用户点击某一列时，屏幕其余部分应变灰 - 除了该列中活动的小部件。

为了实现这种“变灰”效果，我使用模态ModalBarrier类。

如何使小部件显示在模态屏障之上？ （我的问题是，所有内容都显示在模态屏障后面...）

- pipafria

---

你尝试使用过“栈（Stack）”吗？ - OMi Shah

你找到了完成这个任务的方法吗？如果找到了，能否粘贴一小段代码片段？ - Sandra

Answer 1

这个怎么样？

Stack(
    children: [
      new Opacity(
        opacity: 0.3,
        child: const ModalBarrier(dismissible: false, color: Colors.grey),
      ),
      Center(
        child: Container(
          Text('Hello'),
        ),
      ),
    ],
  )

- Yster

---

在ModalBarrier中，颜色可以具有透明度，例如Colors.grey.withOpacity(0.3)，因此避免使用父Opacity小部件。 - Ant D