如何在Widget中的WebviewScaffold上叠加FloatingActionButton？

嘿，你已经离成功很近啦！只需要调整几个小细节，就能让FloatingActionButton正常悬浮在WebviewScaffold上方并工作。下面是具体的解决方案：

关键修改点 #

• 正确传递BuildContext：你的路由builder里用了(_)，这会丢失上下文，导致Navigator.of(context)无法获取正确的导航上下文，要改成(context)。
• 补全代码语法：解开注释的FloatingActionButton代码块，确保所有括号闭合，同时补全未完成的页面跳转组件（比如把AddLi...替换成你实际要跳转的页面，比如AddListItemPage()）。

完整的可运行代码示例 #

"/widget": (context) => WebviewScaffold(
  clearCache: true,
  clearCookies: true,
  withJavascript: false,
  url: selectedUrl,
  appBar: AppBar(
    title: const Text("Widget webview"),
  ),
  withLocalStorage: true,
  // 解开并补全FloatingActionButton代码
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.amber,
    onPressed: () {
      Navigator.of(context).push(MaterialPageRoute(
        // 替换成你实际要跳转的页面组件
        builder: (BuildContext context) => const AddListItemPage(),
      ));
    },
    // 可选：添加图标让按钮更直观
    child: const Icon(Icons.add),
  ),
  // 可选：调整按钮位置，比如设置为右下角悬浮
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
),

额外说明 #

WebviewScaffold本身就内置了floatingActionButton参数，不需要额外用Stack组件来手动叠加，直接配置这个参数就能让按钮自动悬浮在WebView内容的上方。如果需要自定义按钮位置，还可以搭配floatingActionButtonLocation参数来灵活调整。

内容的提问来源于stack exchange，提问作者Art