Flutter：如何对齐两个相邻小部件的高度？

Question

在较大的屏幕上这不是问题，所有小部件的高度都相同，但是在较小的屏幕上，有时其中一个大于其他小部件，因为小部件会扩展自身以包含内容。

我该如何解决？

return ListView(
  children: <Widget>[
    Row(
      children: <Widget>[
        Flexible(child: _valueBox(), flex: 3, fit: FlexFit.tight),
        Flexible(child: _dueDateBox(), flex: 3, fit: FlexFit.tight),
      ],
    ),
    Row(
      children: <Widget>[
        Flexible(child: _advancePaymentBox(), flex: 3, fit: FlexFit.tight),
        Flexible(child: _priceBox(), flex: 3, fit: FlexFit.tight),
      ],
    ),
  ],
);

Answer 1

看起来像是因为文本溢出到新行。如果要强制使用固定大小，则有一个名为ConstrainedBox的小部件。您可能还需要查看此程序包，它可以动态调整文本大小以适合文本。 https://github.com/leisim/auto_size_text

Answer 2

如何使用GridView？ 我认为这是更简单的方法。

这只是示例代码。我添加了2行文字而不是图片。

Widget _valueBox(){
  return Container(color: Colors.blue, 
    child: Column(mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[
        Text("title"), Text("TestA", style: TextStyle(fontSize:50.0))]));
}
Widget _dueDateBox(){
  return Container(color: Colors.yellow, 
    child: Column(mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[
        Text("title"), Text("This is long text", style: TextStyle(fontSize:50.0))]));
}
Widget _advancedPaymentBox(){
  return Container(color: Colors.green, 
    child: Column(mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[
        Text("title"), Text("TestA", style: TextStyle(fontSize:50.0))]));
}
Widget _priceBox(){
  return Container(color: Colors.pink, 
    child: Column(mainAxisAlignment: MainAxisAlignment.center, 
      children: <Widget>[
        Text("title"), Text("This is long text really", style: TextStyle(fontSize:50.0))]));
}

Widget getList(BuildContext context){
  return GridView.count(
    crossAxisCount: 2,
    children: <Widget>[
          _valueBox(),
          _dueDateBox(),
          _advancedPaymentBox(),
          _priceBox()
        ],
  );
}

然后，就是结果。