如何在颤振中从本地html文件中的链接开始新页面

Question

我想从本地html文件中的链接在颤振中启动新页面。

我想从webview(Page_one(转到Page_two.dart页面。我加载了网络视图还可以。

<p style="margin-left: 30px;">Read <a style= "text-decoration: none;" 
href="Page_two.dart">Prohibited ads</a></p></n>

这是我的Page_one.dart文件

class LoadHTMLFileToWEbView extends StatefulWidget {
@override
_LoadHTMLFileToWEbViewState createState() => 
_LoadHTMLFileToWEbViewState();
}
class _LoadHTMLFileToWEbViewState extends State<LoadHTMLFileToWEbView> {
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _loadLocalHTML(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return WebviewScaffold(
appBar: AppBar(title: Text("Load HTM file in WebView")),
withJavascript: true,
appCacheEnabled: true,
url: new Uri.dataFromString(snapshot.data, mimeType: 'text/html' , encoding: utf8)
.toString(),
);
} else if (snapshot.hasError) {
return Scaffold(
body: Center(
child: Text("${snapshot.error}"),
),
);
}
return Scaffold(
body: Center(child: CircularProgressIndicator()),
);
},
);
}
}
Future<String> _loadLocalHTML() async {
return await rootBundle.loadString('assets/test.html');
}

Answer 1

你可以这样做，但你必须改变代码的某些部分。

首先更改href="navigate:Page_two"这样，您可能会得到您在应用程序页面中导航的情况。

然后创建一个bool变量来处理WebView的可见性，因为使用WebViewScaffold导航不会隐藏 Web 视图本身。

然后，您需要设置一个侦听器来相互发送URL更改，并找出您是否正在重定向或导航。

按照下面给出的代码

bool _showWebView = true;
var flutterWebviewPlugin;
String myHtml =
'<p style="margin-left: 30px;">Read <a style= "text-decoration: none;"  href="navigate:Page_two">Prohibited ads1</a></p>';
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Load WebView"),
),
body: _showWebView ? _getWebView() : Container(),
);
}
@override
void dispose() {
flutterWebviewPlugin.dispose();
super.dispose();
}
_getWebView() {
setupListener();
return WebviewScaffold(
withJavascript: true,
appCacheEnabled: true,
url: new Uri.dataFromString(myHtml, mimeType: 'text/html', encoding: utf8)
.toString(),
);
}
setupListener() {
flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.onUrlChanged.listen((String url) {
if (url.startsWith("navigate:")) {
final page = url.substring(url.indexOf(":") + 1, url.length);
Widget widget = null;
setState(() {
_showWebView = false;
});
switch (page) {
case 'Page_two':
widget = PageTwo();
break;
}
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => widget))
.then((value) {
setState(() {
_showWebView = true;
});
});
flutterWebviewPlugin.close();
}
});
}

当根据您的代码在 url 中找到navigate:关键字时，此代码将导航到另一个颤振页面。在重定向时，我们隐藏了Web视图并关闭了侦听器。 当用户返回此屏幕时，我们正在重新创建正在重新创建侦听器的Web视图，并且此流程继续进行。

希望对您有所帮助。