覆盖焦点调查

本次调查基于我们在 super_editor 中遇到的弹出工具栏问题。

考虑一个文档编辑器。当用户选择文本时,会弹出一个工具栏。该工具栏仅应在用户选中某些文本时出现,这也意味着文档编辑器具有焦点。

问题在于,尚不清楚开发者在这种情况下应该如何处理共享焦点。可能会有几种配置用于显示此类工具栏。每种情况都会带来不同的问题。

工具栏覆盖在内容之上

首先,人们可能会尝试将弹出工具栏显示在文档编辑器的 Stack 上方。该小部件位置是否理想,取决于应用的整体布局。

要共享文档编辑器和工具栏之间的焦点,开发者必须在工具栏和文档编辑器共同祖先的上方介入一个 FocusScope。从 super_editor 的文档角度来看,这种介入很繁琐,但应该是可以实现的。鉴于开发者添加了一个 Stack 来容纳文档编辑器和工具栏,开发者可以直接在 Stack 小部件上方添加 FocusScope 小部件。此时,用户可以点击工具栏按钮,而不会从文档编辑器中抢走焦点。

但是,对于工具栏中的下拉菜单如何处理尚不清楚。下拉菜单出现在它们自己的路由中,这似乎总是会抢走焦点。如何打开下拉菜单而不从文档编辑器中移开焦点?

最后,这种工具栏定位方法并非理想,因为文档编辑器的边界可能不是开发者想要的工具栏边界。弹出框通常出现在新的路由或覆盖层中,以便弹出框可以完全控制屏幕放置。

工具栏在全局覆盖层中

将工具栏放置在全局 Overlay 中可能是开发者为弹出工具栏所采取的默认方法。

将工具栏放置在全局 Overlay 中允许用户点击工具栏按钮而不丢失焦点。

但是,当用户点击下拉菜单时,下拉菜单路由会抢走焦点,从而关闭工具栏。

此外,即使我们能够打开下拉菜单,菜单也会出现在新的路由中,该路由位于全局 Overlay 的下方。因此,工具栏会显示在下拉菜单的上方。

工具栏在自定义覆盖层中

为了解决全局 Overlay 位于下拉菜单上层的问题,我们可以使用我们自己的 Overlay 小部件。

要求开发者在 Scaffold 之上添加自己的 Overlay 小部件是一个不幸的要求。开发者不习惯这样做,并且使用全局 Overlay 似乎应该是一种受支持的用例。尽管如此,在 Navigator 下方添加我们自己的 Overlay 是技术上可行的,因此可以将下拉菜单显示在弹出工具栏的上方。

但是,我们仍然面临下拉菜单路由抢走焦点的难题。

GitHub

查看 Github