Flutter常用组件之Text

最新推荐文章于 2025-04-12 19:49:26 发布

Guancya

最新推荐文章于 2025-04-12 19:49:26 发布

阅读量205

点赞数

分类专栏： Flutter 移动app

本文链接：https://blog.youkuaiyun.com/tiger_gy/article/details/102706227

版权

移动app 同时被 2 个专栏收录

34 篇文章

订阅专栏

Flutter

9 篇文章

订阅专栏

Flutter常用组件之Text

最近在学习flutter,就在优快云买了一个课程学习。网上也有好多免费的教程，
有点学不进去，花钱买完了就能看进去了。花完钱不学习感觉就有点罪恶感。
哈哈  真香。下面对Text简单的介绍一下 。

样式

style: TextStyle(
    //字体颜色
    color: const Color(0xffff0000),
    // 删除线  none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
    decoration: TextDecoration.underline,
    // solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
    decorationStyle: TextDecorationStyle.double,
    decorationColor: const Color(0xff00ff00),
    //decorationColor: Colors.red,
    //字体大小
    fontSize: 25.0,
    // normal 正常 italic 斜体
    fontStyle: FontStyle.normal,
    // monospace  serif 字体
    fontFamily: 'serif',
    // 字体粗细  w100 - w900  normal(w400) bold(w700)
    fontWeight: FontWeight.bold,
    //字间距
    letterSpacing: 5.0,
    //高度
    height: 2,
  )

段落的间距样式

在这strutStyle: StrutStyle(
    //字体
    fontFamily: 'serif',
    //字体集合 如果fontFamily未设置 会在结合里面寻找
    fontFamilyFallback: ['monospace', 'serif'],
    //大小
    fontSize: 25.0,
    //高度
    height: 2,
    //首字母和后面字母背书关系
    leading: 2.0,
    fontWeight: FontWeight.w200,
    fontStyle: FontStyle.normal,
    //是否强制设置间距高度
    forceStrutHeight: true,
    debugLabel: 'text demo',
  )里插入代码片

文本对齐方式

可以选择左对齐、右对齐还是居中。

textAlign: TextAlign.left,

文字方向

  textDirection: TextDirection.ltr,

文本的最大显示行数

//clip 裁剪  fade 淡入   ellipsis 省略号   visible 容器外也会渲染组件
  overflow: TextOverflow.ellipsis,,
  maxLines: 3,