在InAppWebView上堆叠小部件

问题描述

我有一个页面，显示一个InAppWebView。我想在其上堆叠一个小部件。当我打开页面时，它会瞬间显示堆叠的小部件，但是一旦加载Web视图，堆叠的小部件就会消失。我打开了Flutter检查器，并且该窗口小部件确实存在于页面中，看起来好像它已隐藏在Web视图的下面。在InAppWebView顶部堆叠小部件时，我是否需要采取其他方法？

class UnityFormViewPage extends StatefulWidget {
  final UnityForm _selectedForm;

  UnityFormViewPage(this._selectedForm);

  @override
  _UnityFormViewPageState createState() => _UnityFormViewPageState();
}

class _UnityFormViewPageState extends State<UnityFormViewPage> {
  String currentUrl = '';

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
          appBar: AppBar(
            title: Text(widget._selectedForm.title),leading: IconButton(
                icon: Icon(Icons.arrow_back),onpressed: () {
                  Navigator.pop(context);
                }),),body: Stack(
            children: [
              OfflineBar(),InAppWebView(
                initialUrl: widget._selectedForm.formUrl,onLoadStart: (InAppWebViewController controller,String url) {
                  setState(() {
                    this.currentUrl = url;
                  });
                },],)),);
  }
}

解决方法

您可以在下面复制粘贴运行完整代码
您可以更改顺序并使用Positioned定位OfflineBar
代码段

Stack(
    children: [
      InAppWebView(
        initialUrl: widget._selectedForm.formUrl,onLoadStart: (InAppWebViewController controller,String url) {
          setState(() {
            this.currentUrl = url;
          });
        },),Positioned(left: 0,right: 0,top: 20,child: OfflineBar()),],)

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class UnityForm {
  String title;
  String formUrl;

  UnityForm({this.title,this.formUrl});
}

class UnityFormViewPage extends StatefulWidget {
  final UnityForm _selectedForm;

  UnityFormViewPage(this._selectedForm);

  @override
  _UnityFormViewPageState createState() => _UnityFormViewPageState();
}

class _UnityFormViewPageState extends State<UnityFormViewPage> {
  String currentUrl = '';

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
          appBar: AppBar(
            title: Text(widget._selectedForm.title),leading: IconButton(
                icon: Icon(Icons.arrow_back),onPressed: () {
                  Navigator.pop(context);
                }),body: Stack(
            children: [
              InAppWebView(
                initialUrl: widget._selectedForm.formUrl,String url) {
                  setState(() {
                    this.currentUrl = url;
                  });
                },)),);
  }
}

class OfflineBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.purple,child: Text("OfflineBar"));
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,home: UnityFormViewPage(
          UnityForm(title: "test",formUrl: "https://flutter.dev/")),);
  }
}

flutterwebviewplugin stack