You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.28 10:45:04