Flutter实现文本结束后显示Divider的布局问题咨询

用IntrinsicHeight搭配Row，结合Align和Expanded就能搞定，让Divider始终对齐文本最后一行，自动填充该行剩余的水平空间。

自定义Widget代码 #

class TextWithDivider extends StatelessWidget {
  final String text;
  final TextStyle? textStyle;
  final Color dividerColor;
  final double dividerThickness;

  const TextWithDivider({
    super.key,
    required this.text,
    this.textStyle,
    this.dividerColor = Colors.grey,
    this.dividerThickness = 1.0,
  });

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          // 文本区域，自动换行
          Flexible(
            child: Text(
              text,
              style: textStyle,
            ),
          ),
          // Divider区域，对齐到文本底部并填充剩余空间
          Expanded(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Divider(
                color: dividerColor,
                thickness: dividerThickness,
                height: dividerThickness,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

使用示例 #

// 短文本场景
TextWithDivider(
  text: "短文本",
  textStyle: TextStyle(fontSize: 16),
),

// 单行长文本场景
TextWithDivider(
  text: "长文本（一行）",
  textStyle: TextStyle(fontSize: 16),
),

// 多行文本场景
TextWithDivider(
  text: "多行文本\n（结束行）",
  textStyle: TextStyle(fontSize: 16),
),

这样就能实现需求效果：不管文本是1行、2行还是3行，Divider都会紧贴文本最后一行的末尾，填充到容器的右侧边缘。

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