Flutter - 如何将两列放入一行中，一列展开，另一列适合其内容文本？

Question

有没有办法用flutter来实现这种布局？一列展开，另一列缩小以适应行内的文本。

我来自网络背景，我知道我可以使用 Flex-grow 和 Flex-shring 以及空白：nowrap 来做到这一点。

我想实现这个布局

但在颤振中我尝试过：

1. 这会给我两个等宽的列：

Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [Text('Monthly Membership'), Text('Subscription')],
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                '+100',
                maxLines: 1,
                softWrap: false,
                overflow: TextOverflow.fade,
              ),
              Text(
                '18 Sept 2021',
                maxLines: 1,
                softWrap: false,
                overflow: TextOverflow.fade,
              ),
            ],
          ),
        ),
      ],
    );

2. 这会报错。

RenderBox 未布局：RenderFlex#3024f relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [Text('Monthly Membership'), Text('Subscription')],
          ),
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '+100',
              maxLines: 1,
              softWrap: false,
              overflow: TextOverflow.fade,
            ),
            Text(
              '18 Sept 2021',
              maxLines: 1,
              softWrap: false,
              overflow: TextOverflow.fade,
            ),
          ],
        ),
      ],
    );

Answer 1

您的第二次尝试失败，因为CrossAxisAlignment.stretch占用了所有可用的水平空间，但 aRow为其子级提供了无限的宽度约束。这迫使列具有无限宽度，这是不可能的。有两个选项可以解决此问题：

1. 使用不同的crossAxisAlignment

这将使每个孩子占据Column尽可能多的空间。根据您的图像，您可能需要CrossAxisAlignment.center，这将使列的子项居中。该列将从两个文本小部件中较大的一个获取其宽度。

        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          // ...

2. 使用IntrinsicWidth

IntrinsicWidth将测量 Column 想要的宽度，然后给它该宽度。Column这将在第二次布局过程中给出严格的宽度约束，这将使CrossAxisAlignment.stretch工作按预期进行。

        IntrinsicWidth(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            // ...

这两个选项都会以无限宽度布局第二列，这意味着如果文本很长，可能会使第一列非常小。如果要限制列的宽度，可以ConstrainedBox在任一解决方案中添加 a 。