flutter - 使用 Package flutter_webview_plugin 获取旧的滚动偏移量
问题描述
我正在尝试使用 Package flutter_webview_plugin将 Webview 集成到测试应用程序中
我的目标是当用户在 Web 视图中向上滚动并在用户向下滚动时显示它时隐藏一个底部导航栏。
在提到的包中有一个监听器来收听垂直 Schroll 的变化:
final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) { // latest offset value in vertical scroll
// compare vertical scroll changes here with old value
});
offsetY 值,是当前值,但我怎么不能得到旧值,将其与新值进行比较?任何想法 ?
解决方案
好的,我已经对此实施了解决方案。
我已经定义了一个变量oldOffset = 0.0
,并在方法中trackOffsetChange
检查oldOffset
了值是否小于该currentOffset
值。如果是这种情况,则oldOffset
获取 的值currentOffset
和setState
重建小部件以隐藏BottomNavBar
,否则显示BottomNavBar
.
这是测试App的全部代码,如果像我这样的新人有兴趣查看源代码:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WebInApp(),
);
}
}
class WebInApp extends StatefulWidget {
@override
_WebInAppState createState() => _WebInAppState();
}
class _WebInAppState extends State<WebInApp> {
bool _isVisible = true;
double oldOffset = 0.0;
final flutterWebOlugin = FlutterWebviewPlugin();
void trackOffsetChange(double currentOffset) {
print('current Offset --->> $currentOffset');
print('old Offset --->> $oldOffset');
if (oldOffset < currentOffset) {
print('old Offset In -- IF --->> $oldOffset');
oldOffset = currentOffset;
setState(() {
_isVisible = false;
});
} else {
setState(() {
_isVisible = true;
});
print('old Offset In -- ESLE --->> $oldOffset');
oldOffset = currentOffset;
}
}
@override
void initState() {
super.initState();
flutterWebOlugin.onScrollYChanged.listen((double yOffset) {
trackOffsetChange(yOffset);
});
}
@override
Widget build(BuildContext context) {
return WebviewScaffold(
url: "https://play.google.com/store/apps",
// hidden: true,
appBar: AppBar(
title: Text('WebView'),
),
bottomNavigationBar: AnimatedContainer(
duration: Duration(microseconds: 300),
height: _isVisible ? 60.0 : 0.0,
child: bottomNav(),
),
);
}
}
class bottomNav extends StatelessWidget {
const bottomNav({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.forward),
title: Text('back'),
),
BottomNavigationBarItem(
icon: Icon(Icons.arrow_back),
title: Text('forward'),
),
],
);
}
}
推荐阅读
- javascript - 如何将谷歌字体添加到 React Native?
- java - 如何从 JDateChooser 获取日期并对其进行格式化?
- html - 如何在页面的最左侧和最右侧显示项目?
- google-cloud-platform - 谷歌云平台 SSH 错误代码 1006
- mysql - 使用 MySQL 表名填充 VBA 组合框
- python - 表单 URL 错误:未找到任何参数的“printReports”反向。已尝试 1 种模式
- mysql - mysql Workbench表数据导入向导解码问题
- arrays - 我应该如何在不同的组件中显示我的检查结果?
- java - 将加密脚本 AES/CBC/PKCS5PADDING Java 转换为 php
- spring-boot - 对于 Hazelcast sidecar 缓存模式,是否可以预期客户端会发现每个节点两次?