Flutter - 如何实现与父容器高度相同的行答案

【问题标题】：Flutter - How to achieve Row with same height as parent ContainerFlutter - 如何实现与父容器高度相同的行
【发布时间】：2020-06-20 04:09:06
【问题描述】：

我必须创建一个具有以下设计的小部件

我为下面的内容创建了一个基本布局。下面的代码在一个列中。

                      Row(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[

                            /*******Outer Container********/
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(8)),
                                border: Border.all(color: Colors.grey, width: 0.5),
                              ),
                              child: Row(
                                children: <Widget>[
                                  Container(
                                    padding: EdgeInsets.all(8),
                                    child: Row(
                                      children: <Widget>[
                                        Text("1981-June-01"),
                                        SizedBox(width: 8),
                                        Icon(Icons.calendar_today),
                                      ],
                                    ),
                                  ),
                                  SizedBox(width: 8),

                                  /*******Inner Container********/
                                  Container(
                                    padding: EdgeInsets.all(8),
                                    child: Text("38Yrs"),
                                    decoration: BoxDecoration(
                                      color: Colors.grey,
                                      borderRadius: BorderRadius.all(Radius.circular(8)),
                                      border: Border.all(color: Colors.grey, width: 0.5),
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),

我得到的结果如下

在父容器和包含这两个容器的 Row 的边界之间仍有一些不需要的填充。我尝试使用 IntrinsicHeight Widget，但 UI 保持不变。我用 IntrinsicHeight Widget 包裹了外部容器和里面的 Row。一次一个，同时两个。但没有变化。

我想要做的是删除外部容器和内部容器之间的额外填充，并使内部容器边框/高度与外部容器相同。我错过了什么吗？任何帮助表示赞赏。

【问题讨论】：

你试过用IntrinsicHeightapi.flutter.dev/flutter/widgets/IntrinsicHeight-class.html包装吗
@Jack 在代码中，我尝试将外部容器和外部容器内的行包装起来（同时在两个容器上，一次一个），但没有任何改变。用户界面保持不变。也尝试过热重载和热重启。
这是简化代码：Material( elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), side: BorderSide(color: Colors.black45, width: 2) ), clipBehavior: Clip.antiAlias, child: Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ SizedBox(width: 8), Text("1981-June-01"), SizedBox(width: 4), Icon(Icons.calendar_today), SizedBox(width: 8), Container( padding: EdgeInsets.symmetric(horizontal: 8, vertical: 12), child: Text("38Yrs"), color: Colors.black26, ), ], ), ),
添加一个自我回答然后...

标签： flutter flutter-layout

【解决方案1】：

这是输出图像：

Row(
    children: <Widget>[
      /*******Outer Container********/
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(8)),
          border: Border.all(color: Colors.grey, width: 0.5),
        ),
        child: Row(
          children: <Widget>[
            Container(
              //padding: EdgeInsets.all(8),
              child: Row(
                children: <Widget>[
                  Text("  1981-June-01"),
                  SizedBox(width: 8),
                  Icon(Icons.calendar_today, size: 15),
                ],
              ),
            ),
            SizedBox(width: 8),
             /*******Inner Container********/
            Container(
              padding: EdgeInsets.all(8),
              child: Text("38Yrs"),
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(8),
                    bottomRight: Radius.circular(8)),
                // border: Border.fromBorderSide(BorderSide.none),
              ),
            ),
          ],
        ),
      )
    ],
  ),

【讨论】：

【解决方案2】：

正如@pskink 在问题下的 cmets 中指定的那样，更简化的答案是将 Row 替换为以下代码（从@pskink 问题下的评论中复制）

Material(
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5),
                                  side: BorderSide(color: Color(0xFFDDDDDD), width: 1)),
                              clipBehavior: Clip.antiAlias,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  SizedBox(width: 8),
                                  Text("1981-June-01", style: dateTextStyle),
                                  SizedBox(width: 8),
                                  Image.asset(
                                    "assets/images/widgetImages/calendar.png",
                                    width: 15,
                                    height: 15,
                                  ),
                                  SizedBox(width: 8),
                                  Container(
                                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                                    child: Text(
                                      "38Yrs",
                                      style: dateTextStyle,
                                    ),
                                    color: Color(0xFFEEEEEE),
                                  ),
                                ],
                              ),
                            ),

就小部件树中的小部件数量而言，此代码更简单。

【讨论】：