Flutter控件——常用控件:Text

2023-10-30

Text

text.dart 源码:

const Text(
    String this.data,       //要显示的字符串
    {
        Key? key,
        this.style,         //样式TextStyle
        this.strutStyle,
        this.textAlign,     //文本应如何水平对齐enum
        this.textDirection, //
        this.locale,
        this.softWrap,
        this.overflow,
        // textScaleFactor代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方
        //式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得,如果没有MediaQuery,那么会默认值将为1.0。
        this.textScaleFactor, //主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整。
        this.maxLines,  //最多几行
        this.semanticsLabel,
        this.textWidthBasis,
        this.textHeightBehavior,
    }
  ) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);
       ……

使用Text.rich构造函数,Text小部件可以显示具有不同样式TextSpan的段落。

const Text.rich(
    InlineSpan this.textSpan, {
    Key? key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  }) : assert(
         textSpan != null,
         'A non-null TextSpan must be provided to a Text.rich widget.',
       ),
       data = null,
       super(key: key);

属性:

(一些比较容易记忆的就没有记录下来)
overflow:是用来设置文本溢出时,如何处理,它有下面几个常用的值供我们选择。

  • TextOverflow.clip:直接切断,剩下的文字就没有了,感觉不太友好,体验性不好。
  • TextOverflow.ellipsis:在后边显示省略号,体验性较好,这个在工作中经常使用。
  • TextOverflow.fade: 溢出的部分会进行一个渐变消失的效果,当然是上下的渐变,不是左右的哦。

textDirection:相对TextAlign中的start、end而言有用(当start使用了ltr相当于end使用了rtl,也相当于TextAlign使用了left)

  • TextDirection.ltr ltr从左至右,
  • TextDirection.rtl rtl从右至左

softWrap: 是否自动换行(true自动换行,false单行显示,超出屏幕部分默认截断处理)
style:样式TextStyle。这个属性的内容比较多:

     const TextStyle({
        this.inherit = true,
        this.color,          //字体颜色  Color.fromARGB(225, 225, 125, 125),
        this.backgroundColor,//背景色
        this.fontSize,       //字体大小 25.0, 字体大小不会跟随系统字体大小变化。可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。
        this.fontWeight,       //字体厚度 FontWeight.w200 特轻 梯度是100 FontWeight.w900 最粗
        this.fontStyle,       //FontStyle.italic 使用斜体 FontStyle.normal 使用直立
        this.letterSpacing,       //水平字母之间的空间间隔(逻辑像素为单位)。可以使用负值来让字母更接近。
        this.wordSpacing,       //单词之间添加的空间间隔(逻辑像素为单位)。可以使用负值来使单词更接近。
        this.textBaseline,       //对齐文本的水平线:
        this.height,       //文本行与行的高度,作为字体大小的倍数(取值1~2,如1.2)具体的行高等于fontSize*height。
        this.leadingDistribution,       //
        this.locale,       //文本的前景色,不能与color共同设置
        this.foreground,       //文本的前景色,不能与color共同设置
        this.background,       //文本背景色Paint()..color = backgroundColor
        this.shadows,       //文本的阴影
        this.fontFeatures,       //
        this.decoration,       //文字的线性装饰,比如 TextDecoration.underline 下划线, TextDecoration.lineThrough删除线
        this.decorationColor,       //文本装饰线的颜色
        this.decorationStyle,       //文本装饰线的样式,比如 TextDecorationStyle.dashed 虚线 TextDecorationStyle.solid 实线
        this.decorationThickness,       //
        this.debugLabel,       //
        String? fontFamily,       //由于不同平台默认支持的字体集不同,所以在手动指定字体时一定要先在不同平台测试一下。
        List<String>? fontFamilyFallback,       //
        String? package,       //
        this.overflow,       //
      }) ...

TextSpan:对一个 Text 内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”

const TextSpan({
  TextStyle style,
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
});

其中style 和 text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组,也就是说TextSpan可以包括其他TextSpan。而recognizer用于对该文本片段上用于手势进行识别处理。
eg:

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "textSpan测试: "
     ),
     TextSpan(
       text: "https://flutter.com",
       style: TextStyle(
         color: Colors.blue
       ),
       recognizer: _tapRecognizer //点击链接后的一个处理器
     ),
    ]
))
  • TextSpan 实现了一个基础文本片段和一个链接片段,然后通过Text.rich 方法将TextSpan 添加到 Text 中,
  • 之所以可以这样做,是因为 Text 其实就是 RichText 的一个包装,而RichText 是可以显示多种样式(富文本)的 widget。

字体

在pubspec.yaml中指定的位置声明:

  fonts:
    - family: Oswald-Medium
      fonts:
        - asset: fonts/Oswald-Medium.ttf
          style: italic

使用字体:

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter控件——常用控件:Text 的相关文章

随机推荐

  • 线性代数——矩阵1

    矩阵 Matrix 不要把矩阵放在分母上 矩阵的概念 有m n个数排成的m行n列的数表称为m行n列的矩阵 简称m n 记作 这m n个数称为矩阵A的元素 简称为元 数aij位于矩阵A的第i行第j列 称为矩阵A的 i j 元 以数 aij为
  • GIT常用统计

    查看git上个人代码量 git log author username pretty tformat numstat awk add 1 subs 2 loc 1 2 END printf added lines s removed lin
  • va_list 详解

    VA LIST 是在C语言中解决变参问题的一组宏 VA LIST的成员 1 va list型变量 ifdef M ALPHA typedef struct char a0 pointer to first homed integer arg
  • 【Spring 核心

    IoC IoC 简介 定义 IoC 和 DI Bean IoC 容器 Ioc IoC容器 IoC 简介 定义 IoC即控制反转 Inversion of Control 缩写为 IoC IoC又称为依赖倒置原则 设计模式六大原则之一 IoC
  • 技术文档工程师笔试_如何帮助工程师制作技术文档

    技术文档工程师笔试 As discussed in my previous post technical writers are a vital part of any team They focus on creating documen
  • FPGA计数器边界问题解析

    FPGA计数器边界问题解析 一次作者在处理AMBE2000数据接收过程中 遇到一个问题 对该计数器边界总是模糊不清 现在予以说明 以警示以后工作时书写错误代码 AMBE2000数据一旦准备好后 一次会输出24个字 其中第1个字0x13ec是
  • 数智人力时代,如何通过人才精细化管理发挥员工最大效能

    人才作为企业竞争中最活跃 也最有创造力的资源要素 管理他们同样也不得马虎 一刀切和单一维度地进行人才分类 不利于员工充分发挥主观能动性 进而提升组织能力 而要让员工在工作中有成就感 获得感和主动性 就需要进行人才精细化管理 对症下药 才能实
  • thinter打开新窗口隐藏主窗口并实现窗口切换

    from tkinter import windows Tk windows geometry 500x300 windows title 主窗口 def b windows withdraw 隐藏主窗口 global root root
  • 百度AI(一)

    前言 第一步 在百度AI上注册账号 在控制台内创建属于你的相应的应用 以下是创建完成后的 API Key SecretKey 是俩个要用到的参数 根据文档 选择相应的API 人脸对比请求地址 发送请求获取 access token 注意 a
  • keepalived + lvs (DR)

    目录 一 概念 二 实验流程命令 三 实验的目的 四 实验步骤 一 概念 Keepalived和LVS Linux Virtual Server 可以结合使用来实现双机热备和负载均衡 Keepalived负责监控主备服务器的可用性 并在主服
  • MySQL —— 复合查询

    目录 MySQL复合查询 一 基本查询回顾 二 多表查询 三 自连接 四 子查询 1 单行子查询 2 多行子查询 3 多列子查询 4 在from子句中使用子查询 五 合并查询 MySQL复合查询 一 基本查询回顾 前面我们讲解的mysql表
  • 2023年——个人每日分享汇总

    摘要 今年是每日分享的第四个年头 在这几年分享中 虽然回头看不知道当时分享内容由何而感 分享内容现在也遗忘记不住 但是这个过程中能够感觉到自己的一个改变 现在的内容错别字少了 也会检查一下语句是否通顺 修行 修心 成长 价值 学到一个四阶段
  • vue过滤器和修饰符

    过滤器的作用 在我们页面显示值之前加一层过滤 展示我们过滤后的值 注意事项 过滤器可以用在两个地方 双花括号插值和 v bind 表达式 使用语法 变量 过滤器名 1 全局定义 Vue filter gettime function dat
  • 百度墨卡托坐标转百度经纬度坐标Python

    本文参考 https blog csdn net qq 16664325 article details 67639684 原文用的是java语言 我只是把它转成Python语言 xu 6370996 81 Sp 1 289059486E7
  • shell脚本----if(数字条件,字符串条件,字符串为空)

    二元比较操作符 比较变量或者比较数字 注意数字与字符串的区别 1 整数比较 cpp view plain copy print eq 等于 如 if a eq b ne 不等于 如 if a ne b gt 大于 如 if a gt b g
  • plt.rcParams参数详解

    plt rcParams参数详解 0 plt rcParams参数 1 Font 1 1 字体 1 2 样式 新增 0 plt rcParams参数 plt rcParams keys font 1 Font 1 1 字体 plt rcPa
  • 数字化时代-20:一张图看清中国金融市场的轮廓

    关键词 资本 金钱 金融 银行 证券 保险 财政 中国制度优势 前言 本文试图通过图解的方式 从宏观上对中国的金融市场有一个初步的认识 在金融市场上流动的鲜血是金钱 金钱是金融市场 甚至整个经济的血液 金钱的充沛的流动给整个经济注入活力 金
  • 蓝桥杯 ADV-319 VIP试题 哈密尔顿回路(试题解析)

    试题 算法提高 哈密尔顿回路 提交此题 评测记录 资源限制 时间限制 2 0s 内存限制 256 0MB 问题描述 给出一个有向图 输出这个图的一个哈密尔顿回路 输入格式 输入的第一行包含两个整数n m 分别表示图的点数和边数 接下来m行
  • Java基础-实现zip解压缩

    可实现 文件 文件夹的解压缩操作 import java io File import java io FileInputStream import java io FileOutputStream import java io IOExc
  • Flutter控件——常用控件:Text

    Text text dart 源码 const Text String this data 要显示的字符串 Key key this style 样式TextStyle this strutStyle this textAlign 文本应如