Android设备上LocalNav部分点击进去的WebView页面Title栏和通知栏之间有空隙
来源:12-10 基于自定义WebView实现H5混合开发-3【H5混合实战】
ReggieMao
2019-03-29
Android设备上球区部分点击进去的WebView页面Title栏和通知栏之间有空隙
web_view.dart类代码如下:
import ‘dart:async’;
import ‘package:flutter/material.dart’;
import ‘package:flutter_webview_plugin/flutter_webview_plugin.dart’;
const CATCH_URLS = [‘m.ctrip.com/’, ‘m.ctrip.com/html5/’, ‘m.ctrip.com/html5’];
class WebView extends StatefulWidget {
final bool backForbid; // 是否可返回
final String title;
final String url;
final String statusBarColor;
final bool hideAppBar;
const WebView(
{Key key,
this.backForbid = false, // 构造WebView时如果没传此参数就赋一个默认值
this.title,
this.url,
this.statusBarColor,
this.hideAppBar})
: super(key: key);
@override
_WebViewState createState() => _WebViewState();
}
class _WebViewState extends State {
final webViewReference = FlutterWebviewPlugin();
StreamSubscription _onUrlChanged;
StreamSubscription _onStateChanged;
StreamSubscription _onHttpError;
bool exiting = false;
@override
void initState() {
super.initState();
webViewReference.close();
_onUrlChanged =
webViewReference.onUrlChanged.listen((String url) {}); // 添加url变化监听
_onStateChanged =
webViewReference.onStateChanged.listen((WebViewStateChanged state) {
// 添加页面状态变化监听
switch (state.type) {
case WebViewState.startLoad:
if (_isToMain(state.url) && !exiting) {
if (widget.backForbid) {
webViewReference.launch(widget.url); // 打开自身页面
} else {
Navigator.pop(context); // 回退到进入WebView时的页面
exiting = true;
}
}
break;
default:
break;
}
});
_onHttpError =
webViewReference.onHttpError.listen((WebViewHttpError error) {
// 添加Http请求错误监听
print(error);
});
}
_isToMain(String url) {
bool contain = false;
for (final value in CATCH_URLS) {
if (url?.endsWith(value) ?? false) {
contain = true;
break;
}
}
return contain;
}
@override
void dispose() {
_onStateChanged.cancel();
_onUrlChanged.cancel();
_onHttpError.cancel();
webViewReference.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
String statusBarColorStr = widget.statusBarColor ?? ‘ffffff’;
Color backButtonColor;
if (statusBarColorStr == ‘ffffff’) {
backButtonColor = Colors.black;
} else {
backButtonColor = Colors.white;
}
return Scaffold(
body: Column(
children: [
_appBar(
Color(int.parse(‘0xff’ + statusBarColorStr)), backButtonColor),
Expanded(
child: WebviewScaffold(
url: widget.url,
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
color: Colors.white,
child: Center(
child: Text(‘Waiting…’),
),
),
))
],
),
);
}
_appBar(Color backgroundColor, Color backButtonColor) {
if (widget.hideAppBar ?? false) {
return Container(
color: backButtonColor,
height: 30,
);
}
return Container(
color: backgroundColor,
padding: EdgeInsets.fromLTRB(0, 40, 0, 10),
child: FractionallySizedBox(
widthFactor: 1,
child: Stack(
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
margin: EdgeInsets.only(left: 10),
child: Icon(
Icons.close,
color: backButtonColor,
size: 26,
),
),
),
Positioned(
left: 0,
right: 0,
child: Center(
child: Text(
widget.title ?? ‘’,
style: TextStyle(color: backButtonColor, fontSize: 20),
),
),
)
],
),
),
);
}
}
2回答
-
将_appBar的占位符的高度根据需求调低点就可以了:
_appBar(Color backgroundColor, Color backButtonColor) { if (widget.hideAppBar ?? false) { return Container( color: backgroundColor, height: 25, ); }
112019-04-02 -
CrazyCodeBoy
2019-03-31
检查下是不是样式设置的问题,修改下样式试一下呢,也可将截图发出来,我帮你看下
00
相似问题