Flutter-应用程序栏中带有下拉菜单的Webview

时间:2018-11-21 17:31:04

标签: drop-down-menu webview dart flutter

我正在尝试在此webview library呈现的屏幕上创建一个下拉菜单。问题是此网络视图绘制的rect与所有内容重叠,如下图所示:

enter image description here

return new WebviewScaffold(
            appBar: new AppBar(
          backgroundColor: Colors.white,
          title: new Theme(
            child: new DropdownButton(
                isExpanded: true,
                items: <String>['Foo', 'Bar'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(
                      value,
                      overflow: TextOverflow.ellipsis,
                    ),
                  );
                }).toList(),
                onChanged: (_) {}),
            data: new ThemeData.dark(),
          ),
            url: new Uri.dataFromString("<h1>test</h1> <p>this is a test</p>",
                mimeType: 'text/html',
                parameters: {'charset': 'utf-8'}).toString(),
          );
        });

然后,我走得更远,我做到了:

final flutterWebviewPlugin = new FlutterWebviewPlugin();
  String url = "https://www.google.com";
  double _height = 100.0;
  GlobalKey _keyRed = GlobalKey();

  Rect rect;

  @override
  void initState() {
    super.initState();

    flutterWebviewPlugin.launch(url, rect: rect);
  }

  void handlepress() {
    setState(() {
      RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
      _height = renderBoxRed.size.height;
      print("height $_height");
    });
  }

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    rect = new Rect.fromLTWH(
        0.0, _height, mediaQuery.size.width, mediaQuery.size.height);
    flutterWebviewPlugin.resize(rect);

    return new AppBar(
      backgroundColor: Colors.white,
      title: new Theme(
        child: new drop.DropdownButton(
            key: _keyRed,
            handler: handlepress,
            isExpanded: true,
            items: <String>['Foo', 'Bar'].map((String value) {
              return new drop.DropdownMenuItem<String>(
                value: value,
                child: new Text(
                  value,
                  overflow: TextOverflow.ellipsis,
                ),
              );
            }).toList(),
            onChanged: (_) => handlepress()),
        data: new ThemeData.dark(),
      ),
      leading: new IconButton(
        icon: new Icon(
          Icons.keyboard_arrow_left,
          color: Colors.black,
          size: 40.0,
        ),
        onPressed: () => Navigator.of(context).pop(),
      ),
      elevation: 0.0,
    );
}

使用第二个代码,drop.DropdownButton是我的班级,它重写DropDownButton以便将我的回调传递给onTap(单击下拉列表的标题)。这段代码会影响网络视图呈现的rect,但仍无法正常工作。

我还尝试在扩展下拉菜单时隐藏rect,然后在折叠时再次显示。但是我找不到发现这些事件的方法。

0 个答案:

没有答案