Как начать новую страницу по ссылке в локальном HTML-файле во флаттере - PullRequest
Новая
       9

Как начать новую страницу по ссылке в локальном HTML-файле во флаттере

0 голосов
/ 19 сентября 2019

Я хочу начать новую страницу во флаттере по ссылке в локальном html-файле.

Я хочу перейти на страницу Page_two.dart из веб-просмотра (Page_one). Я загрузил веб-просмотр в порядке.

 <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');
  }

1 Ответ

0 голосов
/ 20 сентября 2019

Вы можете сделать это, но вам нужно изменить некоторые части вашего кода.

Первое изменение href="navigate:Page_two", таким образом, вы можете получить навигацию по страницам приложения.

Затем создайте переменную bool для обработки видимости WebView, так как навигация с помощью WebViewScaffold не скроет само веб-представление.

Затем вам нужно настроить прослушиватель для перестановки изменений 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();
      }
    });
  }

Этот код переместится на другую страницу флаттера, когда найдет ключевое слово navigate: в URL в соответствии с вашим кодом.При перенаправлении мы скрываем веб-просмотр и закрываем слушателя.Когда пользователь возвращается к этому экрану, мы воссоздаем веб-представление, воссоздающее слушателя, и этот процесс продолжается.

Надеюсь, это поможет.

...