Question

加载HTML代码

这是我位于资产文件夹中的test.html文件的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add an image</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2F3YW5vcG91bG9zIiwiYSI6ImNqdGc3aTh4NTBpZzYzeXA2bG44NzAzYXcifQ.ltDQ5A9BesT6oRZmUauOEQ';
var map = new mapboxgl.Map({
    container: 'map',
    maxZoom: 22,
    zoom: 18,
    center: [-9.412696, 48.441571],
    style: 'mapbox://styles/mapbox/streets-v9'
});
</script>
</body>
</html>

这是我颤抖页面的代码：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

class SignInPage extends StatefulWidget {
  @override
  SignInPageState createState() {
    return SignInPageState();
  }
}

class SignInPageState extends State<SignInPage> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Help')),
      body: WebView(
        initialUrl: '',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _loadHtmlFromAssets();
        },
      ),
    );
  }

  _loadHtmlFromAssets() async {
    String fileText = await rootBundle.loadString('assets/test.html');
    _controller.loadUrl( Uri.dataFromString(
        fileText,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());
  }
}

我总是得到白纸，什么也没装。当我用{test.html）之类的单行替换<h1>HELLO</h1>文件时，html显示得很好。

使用webview_flutter从本地文件渲染HTML

0 个答案: