flutter - 在 flutter 中调整容器大小以精确到屏幕大小的一半

Question

我试图让容器恰好是屏幕高度的一半[在考虑 AppBar 高度之后] 和屏幕宽度的一半。

这是我想出的...

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Flexible(
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(),
          )
        ],
      ),
    );
  }
}

有没有更好的方法？

Answer 1

如果您希望容器的高度是可用空间的一半，您可以使用 LayoutBuilder 小部件。使用 LayoutBuilder 小部件，您可以在构建器函数内部知道最大可用宽度和高度是多少。您的示例用法如下:

Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topCenter,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              height: constraints.maxHeight / 2,
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            );
          },
        ),
      ),
    );