Flutter实现左侧文本自动换行且与右侧文本最小间距20

要实现左侧文本自动换行且与右侧文本保持至少20的最小间距，核心是让左侧控件能根据剩余空间自适应宽度，同时固定中间间距。修改方式如下：

1. 给左侧Column添加Flexible包裹：Flexible会让左侧控件在Row中占据剩余可用空间，当空间不足时自动收缩，从而让Text触发换行。
2. 替换Spacer+Container为固定宽度的SizedBox：直接用SizedBox(width: 20)来保证左右文本间的最小间距，避免Spacer抢占过多空间导致间距失效。

修改后的完整代码：

import 'package:flutter/material.dart';

class DemoView extends StatelessWidget {
  DemoView({super.key});
  final list = ['A Very Long Text ' * 2, 'B Text --------- Text', 'C Text'];
  final list1 = ['Right Text', 'Right Text Right Text', 'C Text'];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ...list.mapIndexed((i, e) => Container(
                color: Colors.grey,
                padding: const EdgeInsets.all(16),
                margin: const EdgeInsets.all(16),
                child: Row(
                  children: [
                    // 用Flexible包裹左侧Column，实现自适应宽度与文本换行
                    Flexible(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            e,
                            maxLines: 3,
                            softWrap: true,
                            overflow: TextOverflow.ellipsis, // 可选：超出3行时显示省略号
                          ),
                          Text('C Short Text'),
                        ],
                      ),
                    ),
                    // 固定20宽度的间距，保证最小间距
                    const SizedBox(width: 20),
                    Text(
                      list1[i],
                      textAlign: TextAlign.end,
                    )
                  ],
                ),
              ))
        ],
      ),
    );
  }
}

extension ListExtensions<E> on List<E> {
  Iterable<R> mapIndexed<R>(R Function(int index, E element) convert) sync* {
    for (var index = 0; index < length; index++) {
      yield convert(index, this[index]);
    }
  }
}

关键说明 #

• Flexible的作用：它允许子控件在Row中获取剩余空间，但不会强制占满（如果用Expanded则会强制占满，效果类似，但Flexible更灵活），这样左侧文本在空间不足时会自动换行，同时右侧文本也能正常显示自身内容。
• SizedBox(width:20)：直接固定左右间距，无论右侧文本多长，这个间距都会保留，满足最小20的要求。
• 可选开启overflow: TextOverflow.ellipsis：当左侧文本超出3行时，末尾显示省略号，优化长文本的显示效果。

内容的提问来源于stack exchange，提问作者Jay