Flutter文本组件Text

Flutter项目开发全套教程 专栏收录该内容
201 篇文章 111 订阅

Flutter 文本组件Text

在android中,一个页面,一般是用 Activity 或者是一个Fragement 来加载显示出来的,而其中的 一个View 或者 一个布局文件(layout.xml) 都可以作为一个页面的根元素

在Flutter中,Widget 可以理解为 用来代替 activity fragement view viewgroup 等等。Widget用来配制显示的页面View信息,最后Element 渲染出来。

本文章首发于微信公众号(biglead) 我的大前端生涯 ,同步刊登各技术论坛。
在这里插入图片描述


Flutter 中 Text 作用

用来显示文本

1 文本控件 Text 基本使用说明

    //构造方法创建,只能生成一种style
    var textWidget = Text("Hello world",
      //文本的对齐方式;可以选择左对齐、右对齐还是居中。
      textAlign: TextAlign.center,
      //文本方向
      textDirection: TextDirection.ltr,
      //是否自动换行 false文字不考虑容器大小  单行显示   超出;屏幕部分将默认截断处理
      softWrap: false,
      //指定文本显示的最大行数,默认情况下,文本是自动折行的
      maxLines: 1,
      //如果有多余的文本,可以通过overflow来指定截断方式,默认是直接截断,
      //TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
      overflow: TextOverflow.ellipsis,
      //代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性
      textScaleFactor: 1.5,
      style: TextStyle(
        //文字的颜色
        color: Colors.blue,
        //该属性和Text的textScaleFactor都用于控制字体大小
        //fontSize可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。
        fontSize: 18.0,
        //该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height
        height: 1.2,
        fontFamily: "Courier",
        background: new Paint()
          ..color = Colors.yellow,
        //线的颜色
        decorationColor: const Color(0xffffffff),
        //none无文字装饰   lineThrough删除线   overline文字上面显示线    underline文字下面显示线
        decoration: TextDecoration.underline,
        //文字装饰的风格  dashed,dotted虚线(简短间隔大小区分)  double三条线  solid两条线
        decorationStyle: TextDecorationStyle.solid,
        //单词间隙(负值可以让单词更紧凑)
        wordSpacing: 0.0,
        //字母间隙(负值可以让字母更紧凑)
        letterSpacing: 0.0,
        //文字样式,斜体和正常
        fontStyle: FontStyle.italic,
        //字体粗细  粗体和正常
        fontWeight: FontWeight.w900,

      ),
    );

2 文本控件 TextRich 富文本显示(多种样式) 属性使用说明

    var textRich = new Text.rich(
      new TextSpan(
        text: 'Hello world',
        style: new TextStyle(
          color: Colors.white,
          fontSize: 14.0,
          decoration: TextDecoration.none,
        ),
        children: <TextSpan>[
          new TextSpan(
            text: '拼接1',
          ),
          new TextSpan(
            text: '拼接7',
            style: new TextStyle(
              color: Colors.green,
            ),
            recognizer:new TapGestureRecognizer()..onTap=(){//增加一个点击事件
              print('1');
            },
          ),
        ],
      ),
    );

【1】 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒点击查看提示

在这里插入图片描述


【2】 本公众号会首发系列专题文章,付费的视频课程会在公众号中免费刊登,在你上下班的路上或者是睡觉前的一刻,本公众号都是你浏览知识干货的一个小选择,收藏不如行动,在那一刻,公众号会提示你该学习了。
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值