【Flutter】【package】auto_size_text 文字自动适配大小

news2024/11/20 10:35:10

文章目录

  • 前言
  • 一、auto_size_text 是什么?
  • 二、使用
    • 1.简单的使用
    • 2.参数说明
    • 3.group
    • 4.rich text
  • 总结


在这里插入图片描述

前言

auto_size_text :https://pub.flutter-io.cn/packages/auto_size_text


一、auto_size_text 是什么?

第三方的插件,能够自动适配你的文本的大小。来适应边界。

二、使用

1.简单的使用

style 部分同text的一样的,基础的功能设备都是同text 文本的使用一样。
下面做一个简单的对比。我们限制一个宽度高度。在里面放入文本。

  • 使用text:文字显示不全的
return Scaffold(
    appBar: AppBar(
      // Here we take the value from the MyHomePage object that was created by
      // the App.build method, and use it to set our appbar title.
      title: Text(widget.title),
    ),
    body: const Center(
        child: SizedBox(
      width: 200,
      height: 140,
      child: Text(
          style: TextStyle(fontSize: 100),
          maxLines: 2,
          'Here we take the value from the MyHomePage object that was created by'),
    ))

    // This trailing comma makes auto-formatting nicer for build methods.
    );

在这里插入图片描述

  • 使用了auto_size_text :自动缩小了文本的size,达到能显示的情况
    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: const Center(
            child: SizedBox(
          width: 200,
          height: 140,
          child: AutoSizeText(
              style: TextStyle(fontSize: 30),
              maxLines: 2,
              'Here we take the value from the MyHomePage object that was created by'),
        ))

        // This trailing comma makes auto-formatting nicer for build methods.
        );

在这里插入图片描述

2.参数说明

参数描述
key*控制一个构件如何替换树中的另一个构件。
textKey设置结果小组件的键Text
style*如果非 null,则用于此文本的样式
minFontSize自动调整文本大小时使用的最小文本大小约束。如果设置了预设字体大小,则被忽略。
maxFontSize自动调整文本大小时使用的最大文本大小约束。如果设置了预设字体大小,则被忽略。
stepGranularity字体大小适应约束的步长。
presetFontSizes预定义所有可能的字体大小。重要:必须按降序排列。presetFontSizes
group同步倍数的大小AutoSizeText
textAlign*文本应如何水平对齐。
textDirection*文本的方向性。这决定了如何解释类似值。textAlignTextAlign.startTextAlign.end
locale*用于在相同的 Unicode 字符可以以不同的方式呈现时选择字体,具体取决于区域设置。
softWrap*文本是否应在软换行符处中断。
wrapWords不适合一行的单词是否应换行。默认为true以表现得像文本。
overflow*应如何处理视觉溢出。
overflowReplacement如果文本溢出且不适合其边界,则改为显示此微件。
textScaleFactor*每个逻辑像素的字体像素数。也影响,和。minFontSizemaxFontSizepresetFontSizes
maxLines文本跨越的可选最大行数。
semanticsLabel*此文本的替代语义标签。

3.group

可以统一各个autosizetext的大小。fontsize大小。来达到统一各个text的字体大小是一致的

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            AutoSizeText(
              "text1",
              group: myautosize,
           
              maxLines: 1,
            ),
            AutoSizeText(
              "Here we take the value from the MyHomePage object that was created byHere we take the value from the MyHomePage object that was created by",
              minFontSize: 100,
              group: myautosize,
            )
          ],
        )

        // This trailing comma makes auto-formatting nicer for build methods.
        );
  • minFontSize: 100, 最终并不会使用这个最小的的这个fontsize,结果如图
    ---

4.rich text

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Column(
          children:const [
            AutoSizeText.rich(
              TextSpan(text: 'A really long String'),
              style: TextStyle(fontSize: 20),
              minFontSize: 5,
            ),
            AutoSizeText.rich(
              TextSpan(children: [
                TextSpan(text: '我是 1'),
                TextSpan(text: '我是 2'),
                TextSpan(text: '我是 3'),
                TextSpan(text: '我是 4'),
                TextSpan(text: '我是 5', style: TextStyle(color: Colors.green)),
              ]),
              style: TextStyle(fontSize: 20),
              minFontSize: 5,
            ),
          ],
        )

        // This trailing comma makes auto-formatting nicer for build methods.
        );

在这里插入图片描述

总结

欢迎关注,留言,咨询,交流!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/10830.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DDD的落地,需要基础设施的大力支持

1. 概览 对于复杂业务,DDD 绝对是一把神器,由于它过于复杂,很多人望而却步。因为太过严谨,形成了很多设计模式、规范化流程,这些爆炸的信息已经成为 DDD 落地的重大阻力。 但,如果我们将这些规范化的流程…

1.4_28 Axure RP 9 for mac 高保真原型图 - 案例27【中继器 - 后台管理系统5】功能-弹窗修改数据

相关链接 目录Axure中文学习网AxureShopAxureShop-QA 案例目标1. 了解使用中继器,弹窗修改数据的实现方式 一、成品效果 Axure Cloud 案例27【中继器 - 后台管理系统5】功能-弹窗修改数据 版本更新一、修改功能   1.1 点击修改按钮,标记该条数据&am…

国产软件Bigemap与国产在线地图源<星图地球数据云>推动国内新GIS应用

自星图地球数据云(GEOVIS Earth Datacloud)图源成为国产基础软件Bigemap的在线地图数据服务平台之一以来,其日均地图瓦片请求调用量目前已经超过2亿。 “星图地球数据云"是中科星图(股票代码[688568])旗下子公司——星图地球倾力打造的在线时空数据云服务平台…

基于约束的装配设计【CadQuery】

本教程介绍在CadQuery中如何使用装配约束功能来构建逼真的模型,我们将组装一个由 20x20 V 型槽型材制成的门组件。 1、定义参数 我们希望从定义模型参数开始,以便以后可以轻松更改尺寸: import cadquery as cq# Parameters H 400 W 200…

2.8 高收藏率小红书笔记怎么写?试一试这7类方法吧【玩赚小红书】

1、教程攻略类 ​ ​ ​ 打开任何一类的美妆产品,最常见的就是各类妆容教程和变美攻略。就拿教程最多的眼妆来说吧,很多女孩子都觉得眼妆很难画好。 如果是碰到网上流行的网红眼影,比如什么猫眼妆、截断式眼影、桃花眼影等等。 【 高收藏秘…

社区团购小程序制作有什么优势_ 社区团购小程序的作用

打造属于自身的独立小程序拥有更高的自主性,特别是基于得店小程序的创新产品力,从设计上彰显品牌理念,到功能上进行扩展拓宽营销方式,都完全自我掌控, ● 更重要的是,相比于平台上各种复杂的机制&#xff0…

点击化学接头BCN-endo-PEG15-NH2,endo-BCN-十五聚乙二醇-胺

(本品应密封避光,储存于阴凉,干燥,通风处,取用一定要干燥,避免频繁的溶解和冻干) 【产品理化指标】: CAS:N/A 化学式:C43H80N2O17,分子量&#xf…

Vue3+TS+Vite 搭建组件库记录

使用pnpm 安装 npm install pnpm -g初始化package.json pnpm init新建配置文件 .npmrc shamefully-hoist true这里简单说下为什么要配置shamefully-hoist。 如果某些工具仅在根目录的node_modules时才有效,可以将其设置为true来提升那些不在根目录的node_modu…

防火墙安全策略

目录 一、包过滤技术 包过滤 安全策略 安全策略的原理 安全策略分类 二、防火墙的转发原理(重点) 首包流程 会话表 状态检测机制 会话在转发流程中的位置 多通道协议技术 ASPF 端口识别对多通道协议的支持 分片缓存 三、防火墙的安全策略配…

万应案例精选|跨壁垒、辅决策,万应低代码助力国网电力内部培训数字化架构升级

万应案例精选|跨壁垒、辅决策,万应低代码助力国网电力内部培训数字化架构升级一、项目背景 国网某省电力有限公司(下称“国网电力”),是国家电网有限公司的全资子公司,现设20个职能部门,下设16…

智慧法院解决方案-最新全套文件

智慧法院解决方案-最新全套文件一、建设背景二、架构思路三、建设方案四、获取 - 智慧法院全套最新解决方案合集一、建设背景 智慧法院是指充分运用互联网、云计算、大数据、人工智能等技术,促进审判体系与审判能力现代化,实现人民法院 高度智能化的运行…

Java基础—普通阻塞队列

普通阻塞队列 除了刚介绍的两个队列,其他队列都是阻塞队列,都实现了接口BlockingQueue,在入队/出队时可能等待,主要方法有: 入队,如果队列满,等待直到队列有空间 void put(E e) throws Inter…

计算机毕业设计Python+Django的银行取号排队系统

项目介绍 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时…

MySQL之短时间提高性能的措施

文章目录前言短连接风暴慢查询QPS(每秒查询数)突增总结前言 我们在使用数据库的时候,总会有那么一段时间,数据库的压力会特别大。比如,用户的使用的高峰期,或者活动上线的时候等等。那么为了应对突然暴增的…

Child Tuning: 反向传播版的Dropout

这篇文章主要是对EMNLP2021上的论文Raise a Child in Large Language Model: Towards Effective and Generalizable Fine-tuning进行讲解。论文标题有些抽象,但是用作者的话来说,这篇论文的思想可以归结为两个词:Child Tuning 虽然这篇文章主…

0-1背包问题

在将什么是0-1背包问题前,先来看下面一道例题: 题意概要:有 n 个物品和一个容量为 W 的背包,每个物品有重量w i和价值v i两种属性,要求 选若干物品放入背包使背包中物品的总价值最大且背包中物品的总重量不超过背包的容…

京东一小伙一年输出20篇专利,其实你也可以

前言: ☆ 本文属于技术总结类干货分享,是实战但又不同于实战,所以不能保证每位同学读后都可以立马自己也输出一篇合格的专利; ☆ 但通过本文的总结分享,已经帮身边同学半年内输出大于100篇专利,所以如果你细…

【字母识别】基于matlab BP神经网络英文字母识别【含Matlab源码 2226期】

⛄一、BP神经网络英文字母识别 1 典型前向网络——BP神经网络 前向网络是目前研究最多的网络形式之一, 它包含输入层、隐层以及输出层, 其中隐层可以为一层或者多层 , 其结构如图1所示. 图1 BP神经网络模型 BP神经网络误差反向传播学习算法的基本思想如下:向网络提供训练例子…

智慧公路筑基者!天翼云打造全栈能力新底座

11月9日-11日,在第十七届中国智能交通年会(ITSAC 2022)暨2022中国智能交通大会上,中国电信作为本届大会特别支持单位,于11月10日成功举办了主题为“构建智慧公路全栈能力新底座”的运营商赋能智慧交通创新论坛。 交通运…

windows 安装ElasticSearch(es)可视化工具

因项目需要,小编这里使用的是 npm版本 6.14.16 nodejs版本14.19.1 1、下载nodejs地址:https://nodejs.org/download/release/v14.19.1/ 版本需要可根据自己电脑进行选择 2、下载可视化项目包 下载地址:https://github.com/mobz/elasticse…