颤动布局appbar底栏溢出答案

【问题标题】：flutter layout appbar bottombar overflow颤动布局appbar底栏溢出
【发布时间】：2022-01-27 14:10:11
【问题描述】：

我的应用每个页面都有一个 appbar 和一个 bottombar 小部件。

在其中一个页面中，我想在一列中显示一个 Text 小部件和一个 WebView 小部件，其中 Text 小部件的高度为 30dp，而 WebView 将填充剩余的空间。

但是，考虑到 appbar 和 bottombar 的大小，我想不出填充 WebView 的方法。

          return Column(
            children: [
              Container(
                height: 30,
                child: Text(
                  "alarm : ${_Message().toString()}",
                  style: TextStyle(fontSize: 15),
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.7, <- hard coded
                child: WebView(
                  initialUrl:
                      url,
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated:
                      (WebViewController webViewController) async {
                    _controller.complete(webViewController);
                  },
                ),
              )
            ],
          );

现在 webview 是硬编码的。

我应该如何更改代码？

【问题讨论】：

用 Expanded 包裹 WebView 容器并从容器中移除高度。
用 Expanded 包裹 WebView 容器并从容器中移除高度

标签： flutter layout flutter-layout

【解决方案1】：

      return Column(
                children: [
                  Container(
                    height: 30,
                    child: Text(
                      "alarm : ${_Message().toString()}",
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                 Expanded(
                    child:Container(
                      child: WebView(
                      initialUrl:
                          url,
                      javascriptMode: JavascriptMode.unrestricted,
                      onWebViewCreated:
                          (WebViewController webViewController) async {
                        _controller.complete(webViewController);
                      },
                    ),
                  ),)
                ],
              );

【讨论】：