Flutter web 显示多个滚动条

Question

我有一个可以在移动设备中正确显示的网络视图。当我在网络中加载相同的 flutter 应用程序时，对于某些文章，它会显示多个滚动条。如何让webview只有一个滚动条？

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextWidget('Article',
            color: whiteColor, fontSize: 17, styling: FontStyling.medium),
        flexibleSpace: Container(
          decoration: BoxDecoration(gradient: linearGradient),
        ),
      ),
      body: Stack(
        children: [
          Image.asset(
            postDefaultImage,
            fit: BoxFit.cover,
            width: double.infinity,
            height: 225,
          ),
          Card(
            child: Container(
              decoration: const BoxDecoration(
                border: Border(
                  top: BorderSide(color: grassGreen, width: 4),
                ),
              ),
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: TextWidget(
                          args?.category.name,
                          color: darkGreyColor,
                        ),
                      ),
                      TextWidget(
                        args?.article.title.rendered.stripHtml,
                        styling: FontStyling.bold,
                        color: darkGreyColor,
                      ).paddingOnly(left: 12.sp, right: 12.sp),
                      TextWidget(
                        '${args?.article.date != null ? DateTime.parse(args!.article.date).toYYYYMMDDHHMM : ''} By ${args?.article.author}',
                        color: darkGreyColor,
                      ).paddingOnly(left: 12.sp, top: 12.sp),
                      const Divider(thickness: 1, indent: 8, endIndent: 8),
                      Expanded(
                        child: kIsWeb
                            ? PlatformWebViewWidget(
                                PlatformWebViewWidgetCreationParams(
                                    controller: _pWebcontroller),
                              ).build(context)  // <--- This widget should only show the scroll
                            : WebViewWidget(
                                controller: controller,
                              ).paddingOnly(left: 8.sp, right: 8.sp),
                      ),
                    ],
                  ),
                  if (!kIsWeb)
                    ValueListenableBuilder(
                      valueListenable: loadingPercentage,
                      builder: (context, value, child) {
                        return Visibility(
                            visible: value < 100,
                            child: _widgets.circleProgress());
                      },
                    ),
                ],
              ),
            ),
          ).paddingOnly(left: 16.sp, right: 16.sp, top: 40.sp, bottom: 16.sp),
        ],
      ),
    );
  }
}

Answer 1

WebView 也有自己的滚动条，因此您可以尝试通过禁用它来解决问题试试这个：

PlatformWebViewWidgetCreationParams(
                                weboptions:InAppWebViewOptions(
        android:AndroidInAppWebView(scrollbarEnabled:false,)
        ios:AndroidInAppWebView(scrollbarEnabled:false,)
)),).build(context) 

希望这有帮助！