【问题标题】:Flutter inappwebview scroll not working inside the NestedScrollView TabBarViewFlutter inappwebview 滚动在 NestedScrollView TabBarView 内不起作用
【发布时间】:2021-07-24 11:21:12
【问题描述】:

我是 Flutter 的新手,我在 TabBarView 中添加了 webview(inappwebview),但是当我尝试向下滚动网页时,它并没有向下滚动,下面我添加了我的代码和屏幕截图

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: DefaultTabController(
          length: 5,
          child: Scaffold(
              body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                new SliverAppBar(
                  title: Text('Tabs Demo'),
                  pinned: true,
                  floating: true,
                  bottom: TabBar(
                    isScrollable: true,
                    tabs: [
                      Tab(child: Text('Flight')),
                      Tab(child: Text('Train')),
                      Tab(child: Text('Car')),
                      Tab(child: Text('Cycle')),
                      Tab(child: Text('Boat')),
                    ],
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: <Widget>[
                InAppWebView(initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev/"))),
                Icon(Icons.directions_transit, size: 350),
                Icon(Icons.directions_car, size: 350),
                Icon(Icons.directions_bike, size: 350),
                Icon(Icons.directions_boat, size: 350),
              ],
            ),
          )),
        ),
      ),
    );
  }
}

截图: page

【问题讨论】:

    标签: flutter flutter-layout flutter-web flutter-inappwebview


    【解决方案1】:

    尝试添加手势检测器,如下所示:

    InAppWebView(
    gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())),
    initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev/"))),
                   
    

    如果这不能解决您的问题,这就是您必须查看的地方,手势检测器。

    【讨论】:

    • 谢谢@Huthaifa Muayyad 先生,现在 webview 滚动正在工作,但它又产生了 2 个新问题,[1]。向下滚动 webview 滚动时,应用栏不会隐藏,[2]。我访问第二个选项卡,向下滚动导致 appbar 隐藏,然后来到 webview 选项卡(假设 appbar 已经隐藏/滚动),然后部分 webview html 不可见并且无法滚动到隐藏部分,我附上了图片供参考i.stack.imgur.com/Zbfil.jpg
    • 不客气。请考虑打开一个新帖子,其中包含新问题的详细信息,并将其标记为已解决。以便每个帖子都有特定的问题和特定的解决方案,谢谢!
    • @HuthaifaMuayyad 非常感谢您的解决方案。我需要指出使用 flutter_inappwebview: ^5.3.2 并且在运行 Flutter SDK 1 时可以滚动。??但它在 Flutter SDK 2.0.6 中停止滚动
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-21
    • 2021-09-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多