带有Webview的小部件已经溢出了

Question

当我在一个简单的页面上使用 webview 和 SingleChildScrollView 创建结构时，当我滚动时，html 会与其他小部件混合在一起。

预期结果

Webview 小部件在自身内部滚动，不会干扰其他小部件

实际结果

Webview 小部件通过与其他小部件混合滚动

 SingleChildScrollView(
  child: Column(
    children: [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      Container(
        height: 100,
        width: Get.width,
        child: SingleChildScrollView(
          child: HTMLWebView(
            htmlData: content,
          ),
        ),
      ),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)

https://github.com/user-attachments/assets/fd885666-fa34-4bf4-a666-08e442213cb7

Answer 1

在 html 中添加

clipBehavior: Clip.hardEdge

Container

。

基于您的代码的示例：

 SingleChildScrollView(
  child: Column(
    children: [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      Container(
        height: 100,
        width: Get.width,
        decoration: const BoxDecoration(),
        clipBehavior: Clip.hardEdge,
        child: SingleChildScrollView(
          child: HTMLWebView(
            htmlData: content,
          ),
        ),
      ),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)

*不需要装饰的容器为什么要添加装饰？

因为要使用

clipBehavior

我们需要添加装饰，否则会捕获错误。

在官方文档中：

Container.decoration不为null时的剪辑行为。

参考资料：clipBehavior 属性