在行文本中使用“扩展”或“灵活”小部件以防止 RenderFlex 溢出时，“间距”将停止工作

Question

当使用“扩展”或“灵活”小部件来避免由“行”小部件内的文本内容引起的渲染弹性溢出时，用于分隔文本的空间会丢失。

这是我创建的在应用程序中使用的自定义小部件，代码如下：

class CustomInfoRow extends StatelessWidget {
  final String label;
  final String value;
  final bool hasDivider;

  const CustomInfoRow({
    super.key,
    required this.label,
    required this.value,
    required this.hasDivider,
  });

  @override
  Widget build(BuildContext context) {
    final textStyle =
        Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 18.0);

    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Text(
                SharedUtils.translate(context, label),
                style: textStyle,
              ),
            ),
            Expanded(
              child: Text(
                SharedUtils.translate(context, value),
                style: textStyle,
              ),
            ),
          ],
        ),
        if (hasDivider) const Divider(),
      ],
    );
  }
}

当我使用灵活的小部件时，它看起来像这样：

当我使用 Expanded 小部件时，它看起来像这样：

这就是我想要的样子：

请帮助我解决此情况。

我想实现最后一张图片中描述的效果

Answer 1

您只需从右侧文本中删除

Flexible

即可。

结果：

代码：

class CustomInfoRow extends StatelessWidget {
  final String label;
  final String value;
  final bool hasDivider;

  const CustomInfoRow({
    super.key,
    required this.label,
    required this.value,
    required this.hasDivider,
  });

  @override
  Widget build(BuildContext context) {
    final textStyle =
        Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 18.0);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          children: [
            Expanded(
              child: Text(
                label,
                style: textStyle,
              ),
            ),
            const SizedBox(width: 20),
            Text(
              value,
              style: textStyle,
            ),
          ],
        ),
        if (hasDivider) const Divider(),
      ],
    );
  }
}