Flutter系列之设置Text文本的行高和间距

最新推荐文章于 2024-09-03 10:05:12 发布

Mr_tigerchou

最新推荐文章于 2024-09-03 10:05:12 发布

阅读量2.7w

点赞数 11

分类专栏： Flutter开发文章标签： flutter 行高间距

本文链接：https://blog.csdn.net/shving/article/details/114458640

版权

Flutter开发专栏收录该内容

16 篇文章 2 订阅

订阅专栏

本文介绍了在Flutter中如何使用Text组件的TextStyle属性设置文本的行高和字间距。通过调整height参数，可以实现1.0、1.5到2.0倍的行高效果，而wordSpacing属性则用于控制字符间距。示例代码展示了不同行高设置下文本的显示差异。

摘要由CSDN通过智能技术生成

设置文本的行高和间距是很常见的操作，flutter中Text组件是通过设置TextStyle中的height来设置行高和间距的，让我们来看一下效果：

class TextHeightTest extends StatefulWidget {
  @override
  _TextHeightTestState createState() => _TextHeightTestState();
}

class _TextHeightTestState extends State<TextHeightTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('字体行高间距'),
      ),
      body: Center(
        child: Text(
          '过去两天，南方阴雨显著增加，并伴随有强对流天气。昨天在春雷声声中，进入了惊蛰节气，监测显示，江淮西部、江南大部、华南北部等地出现中雨或大雨。',
          style: TextStyle(
            fontSize: 18.0,
            color: Colors.black54,
            height: 1.0, //1倍行高
          ),
        ),
      ),
    );
  }
}