我试图让一个容器正好是屏幕高度的一半(在考虑了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(), ) ], ), ); } }
有没有更好的办法?
如果希望容器的高度为可用空间的一半,则可以使用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, ); }, ), ), );