Flutter 如何调整Card内多行Row布局实现指定文本对齐效果

你目前的实现缺少圆点之间的垂直连接线，通过以下步骤修改即可达到预期效果：

• 将单条Row封装为独立的可复用组件，新增isFirst（是否是第一条）、isLast（是否是最后一条）、title（标题文本）、duration（时长文本）四个入参
• 给每条Row外层包裹Stack组件，在Stack的底层绘制垂直连接线，根据isFirst和isLast参数控制连接线的显隐：非第一条显示圆点上方的连接线，非最后一条显示圆点下方的连接线
• 调整原Row的布局结构，用Expanded组件撑开标题文本区域，保证圆点、标题、时长三个区块的布局对齐

可复用时间轴行组件代码 #

class TimelineRow extends StatelessWidget {
  final bool isFirst;
  final bool isLast;
  final String title;
  final String duration;
  final Color dotColor;

  const TimelineRow({
    super.key,
    required this.isFirst,
    required this.isLast,
    required this.title,
    required this.duration,
    this.dotColor = Colors.lightBlue,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 左侧垂直连接线
        Positioned(
          left: 10,
          top: 0,
          bottom: 0,
          child: Column(
            children: [
              // 上方连接线：非第一条展示
              if (!isFirst)
                Expanded(
                  child: Container(
                    width: 2,
                    color: dotColor,
                  ),
                ),
              // 占位高度，匹配圆点尺寸
              const SizedBox(height: 20),
              // 下方连接线：非最后一条展示
              if (!isLast)
                Expanded(
                  child: Container(
                    width: 2,
                    color: dotColor,
                  ),
                ),
            ],
          ),
        ),
        // 内容行
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 4),
          child: Row(
            children: [
              // 左侧圆点
              ClipOval(
                child: Container(
                  height: 20,
                  width: 20,
                  color: dotColor,
                ),
              ),
              const SizedBox(width: 12),
              // 中间标题
              Expanded(
                child: Text(title),
              ),
              // 右侧时长
              Text(duration),
            ],
          ),
        ),
      ],
    );
  }
}

外层Card调用示例 #

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        TimelineRow(
          isFirst: true,
          isLast: false,
          title: 'Example 1',
          duration: '96\'',
        ),
        TimelineRow(
          isFirst: false,
          isLast: false,
          title: 'Example 2',
          duration: '85\'',
        ),
        TimelineRow(
          isFirst: false,
          isLast: false,
          title: 'Example 3',
          duration: '79\'',
        ),
        TimelineRow(
          isFirst: false,
          isLast: false,
          title: 'Example 4',
          duration: '92\'',
        ),
        TimelineRow(
          isFirst: false,
          isLast: false,
          title: 'Example 5',
          duration: '88\'',
        ),
        TimelineRow(
          isFirst: false,
          isLast: true,
          title: 'Example 6',
          duration: '78\'',
        ),
      ],
    ),
  ),
)

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