Flutter中如何控制并设置软换行Text组件的行间距?
Flutter Text组件软换行行间距设置方法
不需要拆分文本到Column等组件里,直接通过Text自身的样式配置就能控制软换行后的行间距,核心用这两个方式:
- 使用TextStyle的height属性
这是最常用的方法,height是行高与字体大小的比值。比如字体大小设为16,height:1.8时,实际行高是16*1.8=28.8,行间距就是28.8-16=12.8。代码示例:
Text( "这是一段超长的测试文本,当内容超出一行宽度时会自动软换行,通过设置height属性就能轻松调整行与行之间的间距,完全不用拆分文本。", style: TextStyle( fontSize: 16, height: 1.8, // 按需调整这个比值 ), )
注意:如果不指定fontSize,height的效果会不明显,因为默认字体大小较小。另外,搭配leadingDistribution: TextLeadingDistribution.even可以让行高均匀分布,避免上下行间距不一致的问题:
Text( "均匀分布行高的测试文本,不会出现某一行间距偏大或偏小的情况。", style: TextStyle( fontSize: 16, height: 1.8, leadingDistribution: TextLeadingDistribution.even, ), )
- 使用StrutStyle精确控制
如果需要更精细的行高控制(比如混合不同字体的文本),可以用strutStyle属性,它定义了文本的“基准支柱”,不管实际文本的字体样式如何,都会按照支柱的高度来设置行高:
Text( "混合字体场景下的测试文本,用StrutStyle能保证行间距统一。", style: TextStyle(fontSize: 16), strutStyle: StrutStyle( height: 1.8, fontSize: 16, ), )
内容的提问来源于stack exchange,提问作者saeed z
相关产品推荐
相关产品推荐

