flutter实现根据widget大小自动调整文字size以最大尺寸显示

已于 2024-08-08 13:39:14 修改
阅读量680 收藏 3
点赞数 6
文章标签： flutter
于 2024-08-08 11:01:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/asdqwe3993/article/details/141019029
版权

首先使用了flutter pub中的auto_size_text，不管设置max_font_size、min_font_size还是style，依然不符合想要的显示效果，所以自己实现了一下

先上实现效果
初始的widget大小
尺寸大小固定
此时更改文字内容不改变widget尺寸
文字内容增加自动根据当前尺寸大小以适应
文字大小不变，widget尺寸增大
当widget尺寸增大时自动增大文字size
尺寸变小
文字不变尺寸变小
实现逻辑：

  1. 首先测量当前显示text的尺寸大小，因为使用的自适应尺寸，所以实际测量的是父组件的大小，然后减去父组件中其他组件的大小得到当前text widget的最大尺寸
  2. 根据最大尺寸换算出最大的font size
  3. 根据文字内容和font size测量出对应的宽高
  4. 当宽度大于widget的最大宽度时(因为实际上有内边距，所以需要多减去一点)font size减小
  5. 继续测量text宽高当高度大于最大高度时(同有内边距)行数增加
  6. 行数增加后对应的test宽度应该减去一行
  7. 4、5、6循环直到不满足条件此时font size是满足widget尺寸的最大值(记得边缘检测)

代码由于没有整理就不贴了
等有空时上传pub
(大概率忘记或者没空或者懒得做)

更新: 仔细看了下发现auto_size_text使用上述步骤限制好尺寸后可以实现部分效果，即尺寸不变的情况下文字变小，但尺寸变化后无法重新适应

如果仅需要尺寸不变时自适应的文字大小使用auto_size_text即可

asdqwe3993
关注
AutoSizeTextFlutter小部件可自动调整文本大小以完全适合其范围
08-10
AutoSizeText - Flutter小部件，可自动调整文本大小以完全适合其范围
flutter 屏幕适配 字体大小适配
热门推荐
卓原的进化之旅
09-21 5万+
前言: 现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同， 比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。 安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而flutter本身并没有适...
自适应文本大小的 Flutter 插件：AutoSizeText
gitblog_00007的博客
05-12 788
自适应文本大小的 Flutter 插件：AutoSizeText auto_size_textFlutter widget that automatically resizes text to fit perfectly within its bounds.项目地址:https://gitcode.com/gh_mirrors/au/auto_size_text 在构建用户界面时，我们经常遇到文...
flutter 屏幕尺寸适配 字体大小适配，实战解析
03-23 1567
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于Flutter的学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的点击我的GitHub免费获取。
Flutter之文本样式
weixin_43244083的博客
07-04 424
textAlign文本的对齐方式-------------->左、右、居中。注意，只有 Text 宽度大于文本内容长度时指定此属性才有意义。maxLines指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的用于指定文本显示的样式如颜色、字体、粗细、背景等fontSize：该属性和 Text 的都用于控制字体大小。
Flutter-----LabelView---文字自适应其大小
zcpHappy的博客
03-11 3015
最近再写FlutterDemo，需要用到一个labelview，网上找了找，没有合适的，就对网上一位大神写的demoLabelDemo改了下，就有这么一个文字自适应大小的labelViewGithub 先看下效果图 说白了就是对CustomPainter 和对画布的操作（旋转和平移） labelAlignment: LabelAlignment.leftTop, labelAlignment:...
flutter实现轮播图效果
01-20
`flutter_swiper`库提供了丰富的配置选项，可以根据项目需求进行调整。 总之，通过`flutter_swiper`库，我们可以轻松地在Flutter应用中实现轮播图效果，包括自动轮播、圆点指示器和点击事件处理等功能。在实际开发...
Flutter笔记- Flutter的布局Widget（二）
南城同学的博客
12-02 2389
多子布局组件 在开发中，我们经常需要将多个Widget放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等； 这个时候我们需要使用多子布局组件（Multi-child layout widgets）。 比较常用的多子布局组件是Row、Column、Stack。 1. Flex组件 Row组件和Column组件都继承自Flex; Flex组件和Row、Column属性主要的区别就是多一个 direction; 当direction的值为Axis.horizont
在 Flutter 中正确处理文本缩放
前端全栈开发者
06-07 901
本教程的结构首先介绍最简单且最有影响力的解决方案。后面的部分涵盖了较难实施且总体影响较小的解决方案，但它们对于解决特定情况很有用。
Flutter+Android/ios 桌面小组件
panghaha12138的博客
08-01 2369
不需要进一步的工作。但请注意，这将使用正常的主入口点启动您的 Flutter 应用程序，这意味着您的完整应用程序可能会在后台运行。相反，您可以生成 Flutter 小部件的 png 文件，并将其保存到 Flutter 应用程序和主屏幕小部件之间的共享容器中。此步骤是可选的，这会将小部件扩展构建版本与您的应用程序版本同步，因此您在上传应用程序时不会收到 App Store Connect 版本不匹配的警告。如果您想让 Widget 能够唤醒应用程序，您需要将以下内容添加到您的AppIntent文件中。
flutter 屏幕尺寸适配和字体大小适配的实现
08-25
主要介绍了flutter 屏幕尺寸适配和字体大小适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter中widget(一)--单子元素布局
wwp9527的博客
06-24 1296
以下内容为自学笔记，若有幸被大神看到，望指正其不准，补充其不足。万分感谢！！！ 注： 简单介绍了18个布局，主要控制绘制，定位，约束和大小的； 本篇略长，可根据目录选择性阅读，18种结构都差不多，可以详细看Container。 系统还提供了几个裁剪形状的单元素的布局，有兴趣的可以自行去看源码，他们的父类都是一样的。 文章目录一、简介二、Container（一）概述（二）属性介绍1、alig...
【Flutter】【package】auto_size_text 文字自动适配大小
自动人生博客
11-16 3006
欢迎关注，留言，咨询，交流！
flutter Text自动计算文本内容的宽度
半身风雪
11-07 3922
在项目开发中，我们有时候需要获取当前文本类容的宽度，并拿到这宽度去做其他的属性设置，本篇文章将主要讲解，如何使用TextPainter 来绘制文本，并获取它的宽高属性。
Flutter学习笔记-设置Text的字体的大小和粗细。
yyxgs的博客
05-09 5960
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp ( title: 'flutter Demo', theme: ThemeData ( .
Flutter自适应文本插件 - auto_size_text教程
gitblog_00451的博客
08-23 634
Flutter自适应文本插件 - auto_size_text教程 auto_sizeFlutter Auto Size，全局屏幕适配。问题太多，暂不建议大家使用，谢谢！项目地址:https://gitcode.com/gh_mirrors/au/auto_size 项目介绍 auto_size_text是由Flutter China社区维护的一个开源库，旨在解决Flutter开发中动态调整文本...
Flutter 宽高自适应
征战无悔人生
08-16 2647
Flutter 宽高自适应
Flutter 自定义导航、字体大小、颜色等
WangQingLei0307的博客
09-17 1514
导航作为app开发想来都不陌生，在app的每一个页面几乎都离不开导航的影子，所以我们要封装一个自定义导航方便每一个页面的使用，导航一般都是左边返回、中间标题、右面保存等功能，下面就为大家 提供一个导航的实现，废话不多说直接上代码，大家可以直接ctrl+c和ctrl+v。 类名大家可以随便起，我这里是 TitleBar.dart 这里我还使用了其他几个类，一个是颜色管理类， ColorUtils.dart 另一个字体尺寸类， FontSizeUtils.dart 一个是全局宏定义类，
flutter根据给定宽度自适应缩放字体大小
weixin_34150830的博客
11-29 2849
flutterautotext flutter 插件 github.com/LiuC520/flu… 根据宽度自动缩放字体 属性： text , //String 要显示的文字 复制代码 width</font> , //doule 指定text的父容器的宽度，必须制定宽度 复制代码 minTextSize , //double 最小的字体大小 默认最小是...
flutter 单位
最新发布
02-18
### Flutter 布局和绘图中的常用单位 在 Flutter 的布局和绘图过程中，开发者可以使用多种单位来指定尺寸、间距和其他几何属性。这些单位有助于创建响应式的用户界面。 #### 逻辑像素（Logical Pixels） Flutter 使用逻辑像素作为默认的测量单位。这允许应用适应不同设备屏幕密度的变化。例如，在高分辨率屏幕上显示相同的视觉大小[^1]。 ```dart Container( width: 100, // 默认情况下宽度为100逻辑像素 height: 100, color: Colors.blue, ) ``` #### 物理像素（Physical Pixels） 物理像素是指显示器上的实际硬件像素点数。通常不建议直接使用此单位进行 UI 开发，因为不同设备具有不同的 DPI 设置。可以通过 `MediaQueryData.devicePixelRatio` 获取当前设备的比例因子并转换成逻辑像素[^2]。 #### 文本相对单位（Text Relative Units） 为了使文本更易于阅读以及更好地适配各种字体大小设置，Flutter 提供了一些基于文本特性的长度度量方式： - **em**: 相对于父级元素字体大小的一个倍数值。 - **rem**: 根据根节点 (`<html>`) 字体大小计算得出的距离值。 不过需要注意的是，由于 Dart 并未原生支持 CSS 类似的 em 或 rem 单位，因此这类概念更多体现在第三方库或是自定义实现上[^3]。 #### 屏幕百分比（Screen Percentage） 有时希望某些控件能够占据整个视窗的一部分空间，则可通过比例的方式来表达这种需求。比如全屏背景图片就可以通过设定宽高等于窗口尺寸达到理想的效果。 ```dart import 'package:flutter/material.dart'; class FullScreenImage extends StatelessWidget { @override Widget build(BuildContext context) { final Size size = MediaQuery.of(context).size; return Container( width: size.width * 1.0, // 宽度等于屏幕宽度 height: size.height * 1.0, // 高度等于屏幕高度 decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: NetworkImage('https://example.com/image.jpg'), ), ), ); } } ``` #### 自动调整大小的文字（Auto-sizing Text） 当涉及到多平台兼容性和国际化时，自动缩放文字功能变得尤为重要。借助 `AutoSizeText` 插件可以让文本根据可用空间动态改变字号以确保最佳展示效果[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值