Flutter 中的列如何匹配父行的高度？答案

【问题标题】：How can a column match a parent row height in Flutter?Flutter 中的列如何匹配父行的高度？
【发布时间】：2021-01-07 04:17:13
【问题描述】：

鉴于以下布局，我试图使FlatButton（右侧按钮）与行高匹配。使用Flexible 或Expandable 小部件似乎不能解决问题。能够用文本 Column 填充剩余空间是一项要求。

这是转换为图像的代码。

class UITest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(
                left: 12.0, bottom: 12.0, top: 12.0, right: 6.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [Text('12'), Text('MAY'), Text('12')],
            ),
          ),
          Text('–'),
          Padding(
            padding: const EdgeInsets.only(
                left: 6.0, bottom: 12.0, top: 12.0, right: 12.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [Text('12'), Text('MAY'), Text('12')],
            ),
          ),
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                    'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet'),
                Text('Lorem')
              ],
            ),
          ),
          SizedBox(
            width: 10.0,
          ),
          ButtonTheme(
            buttonColor: Colors.red,
            minWidth: 0.0,
            padding: EdgeInsets.zero,
            child: FlatButton(
              onPressed: () {},
              child: Image(
                image: AssetImage('assets/icons/location.png'),
                width: 30.0,
                height: 30.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

知道如何实现这一目标吗？

【问题讨论】：

你必须在这里使用 FittedBox：youtube.com/watch?v=T4Uehk3_wlY&vl=en
用SizedBox(height: double.infinity, child: ...)包裹你的FlatButton
@Uni FittedBox 在此示例中不起作用，原因不明:(。如果我尝试将其包裹在 ButtonTheme 或 FlatButton 周围。
@pskink 添加 SizedBox 使我的布局扩展到屏幕高度，我希望按钮与行的高度相同。

标签： flutter flutter-layout

【解决方案1】：

class UITest extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    // use container or similar widget as child for body
    body: Container(
    child:Row(
      // and this gives the children full height
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Padding(
          padding: const EdgeInsets.only(
              left: 12.0, bottom: 12.0, top: 12.0, right: 6.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [Text('12'), Text('MAY'), Text('12')],
          ),
        ),
        Text('–'),
        Padding(
          padding: const EdgeInsets.only(
              left: 6.0, bottom: 12.0, top: 12.0, right: 12.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [Text('12'), Text('MAY'), Text('12')],
          ),
        ),
        Expanded(
          // same here, use container as child
          child: Container(
            child:Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                    'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet'),
                Text('Lorem')
              ],
            )
          ),
        ),
        SizedBox(
          width: 10.0,
        ),
        ButtonTheme(
          buttonColor: Colors.red,
          minWidth: 0.0,
          padding: EdgeInsets.zero,
          child: FlatButton(
            onPressed: () {},
            child: Image(
              image: AssetImage('assets/icons/location.png'),
              width: 30.0,
              height: 30.0,
            ),
          ),
        ),
      ],
    )
  ),
);
 }
}

【讨论】：

此解决方案使我的布局高度与屏幕匹配，我希望 ButtonTheme/FlatButton 与父行高度相同。
这种情况下，改变Container的高度

【解决方案2】：

你可以这样，

用IntrinsicHeight 包裹它以匹配Row 的高度，这样它就不会溢出。

body: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            
            .....
            
            ButtonTheme(
              buttonColor: Colors.red,
              minWidth: 0.0,
              padding: EdgeInsets.zero,
              child: FlatButton(
                color: Colors.blue,
                onPressed: () {},
                child: Image(
                image: AssetImage('assets/icons/location.png'),
                width: 30.0,
                height: 30.0,
                ),
              ),
            ),
          ],
        ),
      )

参考：https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

希望能解决您的问题！

【讨论】：

我不想硬编码容器的高度，它应该是动态的。
这个解决方案效果很好。但是会尝试在没有 IntrinsicHeight 的情况下实现这一点，因为这是一个昂贵的小部件，并且此布局将构建在列表视图中。