flutter WebView 内容让我的屏幕保持 ios

Question

我在网上找了很久。但是没有用。请帮助或尝试提供一些想法如何实现这一目标。

我不知道怎么描述我的错误，不过看图应该能看懂

此错误仅IOS发生

图片

网络视图 https://i.stack.imgur.com/sqwSU.png

滚动 https://i.stack.imgur.com/P3hpT.png

我的代码


class xxx extends State<xxx> {

  ...

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [

        ...

        SizedBox(height: 8),
        Expanded(
          child: StreamBuilder<bool>(
            stream: bloc.loadingStream,
            initialData: false,
            builder: (context, snapshot) {
              Widget loadingWidget = SizedBox.shrink();
              if (snapshot.data) {
                loadingWidget = Container(
                  alignment: Alignment.center,
                  color: Colors.black45,
                  child: RefreshProgressIndicator(),
                );
              }

              return Stack(
                children: [
                  CustomScrollView(
                    slivers: [
                      SliverToBoxAdapter(
                        child: _buildContent(),
                      ),
                      SliverFillRemaining(
                        hasScrollBody: false,
                        child: _buildBottomButton(),
                      ),
                    ],
                  ),
                  loadingWidget,
                ],
              );
            },
          ),
        ),
      ],
    );
  }

  /// 中間內文
  Widget _buildContent() {
    return Container(
      padding: EdgeInsets.symmetric(
        vertical: 12,
        horizontal: 15,
      ),
      margin: EdgeInsets.only(
        left: 20,
        right: 20,
        top: 6,
        bottom: 18,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          color: Color(0xFFf0f7fc),
          width: 1,
        ),
        boxShadow: [
          BoxShadow(
            color: Color(0xFFe6f3fa),
            spreadRadius: 2,
            blurRadius: 1,
          ),
          BoxShadow(
            color: Color(0xFFa9d5f5),
            spreadRadius: 1.5,
            blurRadius: 5,
          ),
        ],
      ),
      child: Column(
        children: [
          
          ...

          _buildRegulationInfo(),
          SizedBox(height: 20),
        ],
      ),
    );
  }

  ...
  
  /// 購物條款
  Widget _buildRegulationInfo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildTitle(S.of(context).Checkout_Regulation_Title),
        SizedBox(height: 12),
        _buildRegulationWeb(),
        SizedBox(height: 4),
        _buildAgreeCheckBox(),
      ],
    );
  }

  ...

  /// 購物條款WebView
  Widget _buildRegulationWeb() {
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        height: 300,
        margin: EdgeInsets.symmetric(horizontal: 8),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
          border: Border.all(
            color: Color(0xFFaaaaaa),
            width: 1,
          ),
        ),
        child: StreamBuilder<RegulationBean>(
          stream: bloc.regulationStream,
          builder: (context, snapshot) {
            if (!snapshot.hasData) return Container();
            var data = snapshot.data;

            String cssStyle = '';

            // IOS 文字過小
            if (Platform.isIOS) {
              cssStyle = """
                \<head\>
                  \<meta name="viewport" content="width=device-width, initial-scale=1.0"\>
                \</head\>
                \<style type="text/css"\>
                  * {
                    font-size: 13px;
                  }
                \</style\>
              """;
            }

            var url = Uri.dataFromString(
              "<!DOCTYPE html><html>$cssStyle<body>${data.content}</body></html>",
              mimeType: 'text/html',
              encoding: Encoding.getByName('utf-8'),
            ).toString();

            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: WebView(
                initialUrl: url,
                javascriptMode: JavascriptMode.unrestricted,
                gestureRecognizers: Set()
                  ..add(
                    Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer(),
                    ), // or null
                  ),
              ),
            );
          },
        ),
      ),
    );
  }

  ...

}

版本

颤振：

• Flutter version 2.0.6 at /Volumes/Backup/flutter
• Framework revision 1d9032c7e1 (6 周前), 2021-04-29 17:37:58 -0700
• Engine revision 05e680e202
• Dart version 2.12.3

IOS: 14.x , 12.x

我的调试

(1) WebView on ScrollView anywhere 没有任何改进

(2) 将 ScrollView 替换为 ListView 对我有帮助

(3) WebView delete gestureRecognizers ... 代码对我有帮助，但不能滚动

任何人都可以帮助我，在此先感谢。

Answer 1

我使用 Opacity 隐藏的 WebView，显示到 WebView 位置 y 的滚动视图内容高度。这对我有帮助。

flutter WebView 内容让我的屏幕保持 ios

flutter WebView content stay my screen on ios

webview

ios

dart

flutter