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回答

CrazyCodeBoy

2019-04-01

将_appBar的占位符的高度根据需求调低点就可以了:

_appBar(Color backgroundColor, Color backButtonColor) {
  if (widget.hideAppBar ?? false) {
    return Container(
      color: backgroundColor,
      height: 25,
    );
  }


1
1
ReggieMao
非常感谢!
2019-04-02
共1条回复

CrazyCodeBoy

2019-03-31

检查下是不是样式设置的问题,修改下样式试一下呢,也可将截图发出来,我帮你看下

0
0

Flutter从入门到进阶 实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势,,系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程