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

Flutter如何调整文本高度?尝试height属性未达预期效果

解决Flutter Text组件目标样式问题

针对你遇到的调整height和fontSize无法达到预期文本样式的问题,提供以下几种可行方案:

方案一:通过TextStyle的height属性调整行高比例

height属性是行高与字体大小的比值,并非直接设置文字高度。如果想要让文字在垂直方向更舒展,可设置大于1的数值,同时配合字体大小调整:

Text(
  widget.subscriptionModel.discountPrice!,
  textAlign: TextAlign.center,
  style: TextStyle(
    color: Colors.red,
    fontSize: 20,
    height: 1.5, // 行高为字体大小的1.5倍,增强垂直方向视觉效果
    fontWeight: FontWeight.bold, // 需加粗效果可添加
  ),
),

方案二:使用Transform.scale实现文字垂直缩放

如果需要直接拉伸/压缩文字本身的垂直尺寸,而非调整行高,可借助Transform.scale单独控制垂直方向的缩放比例:

Transform.scale(
  scaleY: 1.5, // 垂直方向放大1.5倍,水平方向保持原尺寸
  child: Text(
    widget.subscriptionModel.discountPrice!,
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.red,
      fontSize: 20,
    ),
  ),
),

方案三:引入自定义字体

如果目标样式是特定字体形态(如特殊粗体、艺术字体),可以引入自定义字体文件:

  1. 将字体文件(如CustomBold.ttf)放入项目assets/fonts目录
  2. 在pubspec.yaml中配置字体:
flutter:
  fonts:
    - family: CustomBold
      fonts:
        - asset: fonts/CustomBold.ttf
  1. 在Text组件中使用该字体:
Text(
  widget.subscriptionModel.discountPrice!,
  textAlign: TextAlign.center,
  style: TextStyle(
    color: Colors.red,
    fontSize: 20,
    fontFamily: 'CustomBold',
  ),
),

内容的提问来源于stack exchange,提问作者user18710300

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.26 04:54:11