flutter - 使 Column 的子项（例如容器布局）水平 wrap_content

Question

如图所示：

两个文本之间有一条实线（神奇宝贝，上午 11.25）。我想要的是等于最长文本长度的行的长度。但是该行的行为类似于 match_parent。

在 Android Native 中，我们可以使用垂直 LinearLayout，并在水平方向设置 android:layout_width="wrap_content" 限制。

在 Flutter 中，我们只能在垂直方向设置 Column mainAxisSize: MainAxisSize.min 限制。

我猜这个问题是由于分频器。当 Divider 消失时，Column 的宽度是 wrap_content。

实验如下：

      Container(
        color: Colors.red,
        margin: EdgeInsets.symmetric(horizontal: 8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              margin: EdgeInsets.symmetric(vertical: 8.0),
              padding: EdgeInsets.all(4.0),
              child: Text(
                'Pokémon',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Divider(
              height: 2.0,
              color: Colors.white,
            ),
            Container(
              margin: EdgeInsets.only(top: 8.0),
              child: Text(
                '11.25 AM',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 12.0,
                    fontWeight: FontWeight.bold),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),

标签： flutter

Answer 1

您可以使用 -IntrinsicWidth小部件。用它包裹 Column。

Container(
          color: Colors.red,
          margin: EdgeInsets.symmetric(horizontal: 8.0),
          child: IntrinsicWidth(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(vertical: 8.0),
                  padding: EdgeInsets.all(4.0),
                  child: Text(
                    'Pokémon',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Divider(
                  height: 2.0,
                  color: Colors.white,
                ),
                Container(
                  margin: EdgeInsets.only(top: 8.0),
                  child: Text(
                    '11.25 AM',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),