flutter中如何获取页面高度

在Flutter中，可以通过`MediaQuery.of(context).size.height`获取当前页面的高度。也可以使用`LayoutBuilder`组件来获取子组件的高度，如下所示：

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double height = constraints.maxHeight;
    return Container(
      height: height,
      child: // Your child widget here
    );
  }
)

另外，还可以通过`GlobalKey`来获取某个`Widget`的高度，示例代码如下：

GlobalKey _key = GlobalKey();
double height = _key.currentContext.size.height;
// 在需要获取高度的Widget中添加key属性
Container(
  key: _key,
  child: // Your child widget here
)

相关问题

Flutter webView 页面自适应高度

要实现 Flutter WebView 页面自适应高度，可以使用 flutter_webview_plugin 插件。该插件提供了一个 onStateChanged 回调函数，可以监听 WebView 页面的状态改变。当页面加载完成后，可以获取 WebView 页面的高度，并将其应用到 WebView 上，从而实现自适应高度。

以下是一个简单的示例代码，演示如何实现 Flutter WebView 页面自适应高度：

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

class MyWebView extends StatefulWidget {
  final String url;

  MyWebView({required this.url});

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

class _MyWebViewState extends State<MyWebView> {
  double webViewHeight = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: webViewHeight,
        child: WebviewScaffold(
          url: widget.url,
          withZoom: false,
          withJavascript: true,
          withLocalStorage: true,
          hidden: true,
          initialChild: Container(
            color: Colors.white,
            child: Center(
              child: CircularProgressIndicator(),
            ),
          ),
          appBar: AppBar(
            title: Text('WebView Demo'),
          ),
          onStateChanged: (state) {
            if (state.type == WebViewState.finishLoad) {
              setState(() {
                webViewHeight = double.parse(state.height.toString());
              });
            }
          },
        ),
      ),
    );
  }
}

在上面的代码中，我们定义了一个 MyWebView 类，使用 WebviewScaffold 来渲染 WebView 页面。在 onStateChanged 回调函数中，我们监听 WebView 页面的状态改变，并在页面加载完成后获取 WebView 的高度，并将其应用到 WebView 上。这样，就可以实现 WebView 页面的自适应高度了。

Flutter webView自适应高度

要让Flutter WebView组件自适应高度，可以使用IntrinsicHeight和LayoutBuilder组件来实现。具体实现步骤如下：

1. 在WebView外面包裹一个IntrinsicHeight组件，让WebView的高度自适应它的子组件的最大高度。

2. 在WebView内部使用LayoutBuilder组件，获取WebView的实际高度，并将实际高度保存在一个变量中。

3. 将WebView的高度设置为保存的实际高度，这样WebView的高度就能够自适应了。

下面是一个示例代码：

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

class MyWebView extends StatefulWidget {
  final String url;

  const MyWebView({Key key, this.url}) : super(key: key);

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

class _MyWebViewState extends State<MyWebView> {
  double _webViewHeight;

  @override
  void initState() {
    super.initState();
    _webViewHeight = 1.0;
  }

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return WebView(
            initialUrl: widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (String url) {
              setState(() {
                _webViewHeight = double.parse(
                    "document.documentElement.scrollHeight.toString()");
              });
            },
            gestureNavigationEnabled: true,
            navigationDelegate: (NavigationRequest request) {
              return NavigationDecision.navigate;
            },
            onWebResourceError: (err) {
              print(err);
            },
            javascriptChannels: <JavascriptChannel>[
              JavascriptChannel(
                  name: 'Print',
                  onMessageReceived: (JavascriptMessage message) {
                    print(message.message);
                  }),
            ].toSet(),
          );
        },
      ),
    );
  }
}

在这个示例代码中，我们使用了IntrinsicHeight和LayoutBuilder组件来实现WebView的自适应高度。在布局中，我们首先将WebView包裹在一个IntrinsicHeight组件中，然后在WebView内部使用LayoutBuilder组件获取WebView的高度，并在页面加载完成后更新WebView的高度。这样，WebView就可以自适应高度了。