Flutter中如何为动态加载的字符串文本添加合适间距?
方案1:仅调整行与行之间的间距
你可以直接给Text组件的文本样式新增height参数控制行高,该参数值为字体大小的倍数,可根据你需要的间距大小调整数值,通常1.5-1.8是比较舒适的阅读行高范围,修改后代码如下:
Container( height: 240.h, width: Get.width / 1.1, child: SingleChildScrollView( child: Text( product.description, // 仅需要在原有样式基础上追加height属性即可,数值可自定义调整 style: subHeadingTextStyle6.copyWith(height: 1.6), ), ) )
方案2:调整段落(换行分隔的内容)之间的间距
如果你的产品描述里包含\n换行符,需要实现段落间距大于普通行间距的效果,可以先将文本按换行符拆分成分立的段落,再逐个渲染并添加段落间距,代码示例如下:
Container( height: 240.h, width: Get.width / 1.1, child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: product.description.split('\n').map((paragraph) { // 过滤掉空行,可根据需求保留或删除 if (paragraph.trim().isEmpty) return const SizedBox.shrink(); return Padding( // 底部的padding就是段落之间的间距,可自定义调整 padding: EdgeInsets.only(bottom: 10.h), child: Text( paragraph, style: subHeadingTextStyle6.copyWith(height: 1.6), ), ); }).toList(), ), ) )
内容的提问来源于stack exchange,提问作者navidanchitrali
相关产品推荐
相关产品推荐

