Flutter FittedBox

🔥 英文单词FittedBox 🔥

Fitted 通过有道翻译如下 : 

Box 通过有道翻译如下 : 

 

 对 FittedBox 的理解

我们可以将 FittedBox 理解为合适的盒子,将其它布局放到FittedBox这样一个盒子中,从而实现 盒子里面的子布局更好的放置。

 参考 Flutter实战 空间适配(FittedBox)

🔥 为什么使用 FittedBox 🔥

使用 FittedBox 的原因

        在开发的过程中经常会遇到子widget大小超过父widget大小的现象。子widget应该遵循父widget的约束,如果子widget的原始大小超过了父原始视图的大小,就需要进行相应的处理(比如:缩小、裁剪等)。

        如果父 widget 宽度固定高度不固定,则默认情况下 Text 会在文本到达父组件宽度的时候换行。

        如果我们想让 Text 文本在超过父组件的宽度时不要换行而是字体缩小,这时候就需要用到 FittedBox 组件

        

Text 文本溢出  

Row(children: [Text('文本内容过长就超出屏幕宽度/' * 30,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],
)

Image 加载网络图片溢出 

Row(children: [Image.network('https://www.2008php.com/2011_Website_appreciate/2011-03-28/20110328134546.jpg'),],
)

 🔥 FittedBox 属性 🔥

final BoxFit  fit// 适配方式
final AlignmentGeometry alignment ;// 对齐方式
final Clip clipBehavior ;// 是否剪裁

BoxFit.none

显示屏幕范围宽度的内容, 超过屏幕范围的内容不显示

FittedBox(fit: BoxFit.none,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 7,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),)

 BoxFit.contain

文本所有内容都显示到屏幕范围内,按字体大小进行缩小

FittedBox(fit: BoxFit.contain,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 7,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),
)

 BoxFit.fitWidth / fitHeight

需要设置 FittedBox 的大小,不然设置 BoxFit.fitWidth BoxFit.fitHeight 无效。

 当没有设置 FittedBox 大小时,文本始终显示在屏幕的范围内,填充屏幕宽度

SizedBox(/*height: 20.w,width: double.infinity,*/child: FittedBox(fit: BoxFit.fitHeight,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

SizedBox(/*height: 20.w,width: double.infinity,*/child: FittedBox(fit: BoxFit.fitWidth,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

        当设置 FittedBox 大小时,文本始终显示在屏幕的范围内;如果是 BoxFit.fitWidth 填充屏幕宽度的形式展示文本,如果是 BoxFit.fitHeight 填充屏幕高度的形式展示文本。

SizedBox(height: 50.w,width: double.infinity,child: FittedBox(fit: BoxFit.fitHeight,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

SizedBox(height: 50.w,width: double.infinity,child: FittedBox(fit: BoxFit.fitWidth,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

Boxfit.scaleDown

保证不超过 父 Widget的大小。如果字体原始的高度比父容器的高度小,那么就按照父容器的高度进行缩小;如果原始字体宽度比父容器的宽度小,就按照父容器的宽度进行缩小。

SizedBox(height: 10.w,width: double.infinity,child: FittedBox(fit: BoxFit.scaleDown,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

SizedBox(height: 40.w,width: double.infinity,child: FittedBox(fit: BoxFit.scaleDown,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

 Boxfit.fill

保证不超过 父 Widget的大小。如果字体原始的高度比父容器的高度小,那么久拉伸字体高度到容器高度,相反就压缩字体高度到父容器高度。

SizedBox(height: 140.w,width: double.infinity,child: FittedBox(fit: BoxFit.fill,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

 

SizedBox(height: 14.w,width: double.infinity,child: FittedBox(fit: BoxFit.fill,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

 

 Boxfit.cover

内容按照原始尺寸填充父容器的宽或者高,但可能会超过父容器的范围。

如果字体原始高度小于 父容器高度,这时候就填充高度 ,可能会出现超过父容器范围的情况。

如果字体原始高度不小于 父容器高度,这时候就填充宽度,不会出现超过父容器的情况。

SizedBox(height: 80.w,width: double.infinity,child: FittedBox(fit: BoxFit.cover,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

SizedBox(height: 2.w,width: double.infinity,child: FittedBox(fit: BoxFit.cover,child: Row(children: [Text('文本内容过长就超出屏幕宽度/' * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),)

 

Clip.none

如果子Widget的高度超过父视图的高度,不做裁剪,那么高度就显示成子视图的高度

Container(width: 160,height: 150,color: Colors.red,child: FittedBox(fit: BoxFit.fitWidth,clipBehavior: Clip.none,child: Container(width: 160, height: 200, color: Colors.blue),),)

剪切前

 Clip.hardEdge

如果子Widget的高度超过父视图的高度,就进行裁剪,高度就显示成夫视图的高度。

Container(width: 160,height: 150,color: Colors.red,child: FittedBox(fit: BoxFit.fitWidth,clipBehavior: Clip.hardEdge,child: Container(width: 160, height: 200, color: Colors.blue),),)

剪切后 

🔥 裁剪超范围区域 🔥

ClipRect(// 将超出子组件布局范围的绘制内容剪裁掉child: Container(width: 50,height: 50,color: Colors.red,child: FittedBox(fit: BoxFit.none,child: Container(width: 60, height: 70, color: Colors.blue),),),)

 🔥 打印布局时的约束信息 🔥

class LayoutLogPrint<T> extends StatelessWidget {const LayoutLogPrint({Key? key,this.tag,required this.child,}) : super(key: key);final Widget child;final T? tag; //指定日志tag@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (_, constraints) {// assert在编译release版本时会被去除assert(() {if (kDebugMode) {print('${tag ?? key ?? child}: $constraints');}return true;}());return child;});}
}
Column(children: [wRow(' 内容是否发生溢出/ '),FittedBox(child: wRow(' 内容是否发生溢出/ ')),].map((e) => Padding(padding: const EdgeInsets.symmetric(vertical: 20),child: e,)).toList(),)
  // 直接使用RowWidget wRow(String text) {Widget child = Text(text,style: const TextStyle(color: Colors.black, fontSize: 20.0),);child = Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [child, child, child],);return LayoutLogPrint(child: child);}

I/flutter (13152): Row(direction: horizontal, mainAxisAlignment: spaceEvenly, crossAxisAlignment: center): BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
I/flutter (13152): Row(direction: horizontal, mainAxisAlignment: spaceEvenly, crossAxisAlignment: center): BoxConstraints(unconstrained)

 🔥 使用FittedBox也发生溢出 🔥  

class SingleLineFittedBox extends StatelessWidget {const SingleLineFittedBox({Key? key,this.child}) : super(key: key);final Widget? child;@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (_, constraints) {return FittedBox(child: ConstrainedBox(constraints: constraints.copyWith(//让 maxWidth 使用屏幕宽度maxWidth: constraints.maxWidth),child: child,),);},);}
}
Column(children: [wRow(' 内容是否发生溢出 '),SingleLineFittedBox(child: wRow(' 内容是否发生溢出 ')),wRow(' 少内容 '),FittedBox(child: wRow(' 内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤 '),)].map((e) => Padding(padding: const EdgeInsets.symmetric(vertical: 20),child: e,)).toList(),)
// 直接使用RowWidget wRow(String text) {Widget child = Text(text,style: const TextStyle(color: Colors.black, fontSize: 16.0),);child = Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [child, child, child],);return child;}

SingleLineFittedBox 中将传给 Row 的 maxWidth 置为屏幕宽度后,效果和不加 SingleLineFittedBox 的效果是一样的。

 解决方案: 最小宽度(minWidth)约束指定为屏幕宽度 , 因为Row必须得遵守父组件的约束,所以 Row 的宽度至少等于屏幕宽度,所以就不会出现缩在一起的情况;同时我们将 maxWidth 指定为无限大 (double.infinity),则就可以处理数字总长度超出屏幕宽度的情况。

 

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

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

相关文章

kubernetes实验挑战二(troubleshoot pv pvc )

This 2-Node Kubernetes cluster is broken! Troubleshoot, fix the cluster issues and then deploy the objects according to the given architecture diagram to unlock our Image Gallery!! 1、 kubeconfig /root/.kube/config, User ‘kubernetes-admin’ Cluster: S…

SpringCloud(一) 服务架构的演变及注册RestTemplate实现服务的远程调用

目录 一, 服务架构的演变 1.1 单体架构 1.2 分布式架构 1.3 微服务 1.4 SpringCloud 二, 服务拆分和远程调用 2,1 服务拆分原则 2.2 服务拆分示例 2.3 创建相应数据库 2.4 实现远程调用示例 1, 更改需求 2, 注册RestTemplate实现远程调用 2.5 服务消费者和提供者 一…

D-Bus:数据类型

D-Bus中描述接口的属性和方法,有其自己定义的一套签名描述方式: 数据类型描述符号对应C++数据类型avector/array数组, ai表示的是vector<int32_t>bboolddouble双精度浮点数iint32_t,32位有符号整数nint16_t,16位有符号整数oobject_path对象路径quint16_t,16位无符号…

【数据分析】上市公司半年报数据分析

前言 前文介绍过使用网络技术获取上市公司半年报数据的方法&#xff0c;本文将对获取到的数据进行简要的数据分析。 获取数据的代码介绍在下面的两篇文章中 【java爬虫】使用selenium获取某交易所公司半年报数据-CSDN博客 【java爬虫】公司半年报数据展示-CSDN博客 全量数…

Flutter笔记:完全基于Flutter绘图技术绘制一个精美的Dash图标(中)

Flutter笔记 完全基于Flutter绘图技术绘制一个精美的Dart语言吉祥物Dash&#xff08;中&#xff09; 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://…

微服务框架Consul--新手入门

Consul Consul 是由 HashiCorp 开发的一款软件工具&#xff0c;提供了一组功能&#xff0c;用于服务发现、配置管理和网络基础设施自动化。它旨在帮助组织管理现代分布式和微服务架构系统的复杂性。以下是Consul的一些关键方面和功能&#xff1a; 服务发现&#xff1a;Consul …

【Qt之QString】去除“字符“或替换“字符“小技巧

去除字符 在Qt中&#xff0c;可以使用以下函数来去除字符串中的字符。 QString &remove(int i, int len)&#xff1a;删除字符串中从索引位置i开始长度为len的字符。QString &remove(QChar c, Qt::CaseSensitivity cs Qt::CaseSensitive)&#xff1a;删除字符串中所…

SQL Wildcards 通配符

SQL Wildcards 通配符 通配符用于替换字符串中的任何其他字符。 通配符与 SQL LIKE 运算符一起使用。在 WHERE 子句中使用LIKE运算符来搜索列中的指定模式。 有两个通配符与 LIKE 运算符一起使用&#xff1a; &#xff05; - 百分号表示零个&#xff0c;一个或多个字符_ - 下…

【Linux】centOS7安装配置及Linux的常用命令---超详细

一&#xff0c;centOS 1.1 centOS的概念 CentOS&#xff08;Community Enterprise Operating System&#xff09;是一个由社区支持的企业级操作系统&#xff0c;它是以Red Hat Enterprise Linux&#xff08;RHEL&#xff09;源代码为基础构建的。CentOS提供了一个稳定、可靠且…

软件测试面试高频30道面试题

如果哪个测试经理在看我的文章&#xff0c;希望对面试者要微笑&#xff0c;不然面试结束&#xff0c;出门之后就一万个草泥马奔腾而过&#xff0c;其实面试者并不是希望你给他们什么&#xff0c;而是一种尊重&#xff0c;平等的谈话&#xff0c;不要高高在上感觉自己超牛逼一样…

js数组深拷贝汇总

1.for 循环实现数组的深拷贝 通过对数组的for循环&#xff0c;即可实现对数组的深拷贝了。 var arr [1,2,3,4,5] var arr2 copyArr(arr) function copyArr(arr) {let res []for (let i 0; i < arr.length; i) {res.push(arr[i])}return res }2.slice 方法实现数组的深…

论文范文:论基于架构的软件设计方法及应用

注意:范文只适用于帮助大家打开写作思路,并不能作为素材直接用于平时练习、考试中。考试中直接使用范文的素材,会有被认定为雷同卷的风险。 摘要: 2022年4月,本人所在单位计划研发生态集装箱管理控制平台项目。该平台主要用于与现有公司生态集装箱产品做对接,达到远程控制…

七层负载均衡 HAproxy

一、HAproxy 1、负载均衡类型&#xff1a; (1) 无负载均衡&#xff1a; 没有负载均衡&#xff0c;用户直接连接到 Web 服务器。当许多用户同时访问服务器时&#xff0c;可能无法连接。 (2) 四层负载均衡&#xff1a; 用户访问负载均衡器&#xff0c;负载均衡器将用户的请求…

Knife4j使用教程(五)-- 上传gitee,由Maven管理的SpringBoot项目

项目地址: puyalei / SpringBoot_learn Knife4j使用教程的学习之路: Knife4j使用教程(一) -- 在不同版本SpringBoot,选用不同的Knife4j相关的jar包 Knife4j使用教程(二) -- 配置Swagger相关信息 Knife4j使用教程(三)

PC1961干电池同步升压芯片低纹波高效率只需三个外围元器件

产品概述PC1961系列产品是一款低功耗高效率、低纹波、工作频率高的 PFM 控制升压 DC-DC 变换器。PC1961 系列产品仅需要3个外部元器,即可完成低输入的电池电压输入。用途1-3 个千电池的电子设备数码相机。电子词典 LED手电简、LED灯血压计、MP3、遥控玩具 无线耳机、无线鼠…

redis实现分布式延时队列

文章目录 延时队列简介应用场景案例&#xff1a;考虑&#xff1a;实现&#xff1a;整体思路&#xff1a;具体实现生产者消费者 运行结果 redis分布式延时队列优势redis分布式延时队列劣势 延时队列简介 延时队列是一种特殊的消息队列&#xff0c;它允许将消息在一定的延迟时间…

Gerrit 事件监听实现

环境 Centos 7.9 Gerrit 2.15 Gerrit 2.15容器搭建 docker-compose.yml version: 3 services:gerrit:image: gerritcodereview/gerrit:2.15ports:- 8080:8080- 29418:29418volumes:- ./review_site:/var/gerrit/review_siteenvironment:- CANONICAL_WEB_URLhttp://localhos…

增强常见问题解答搜索引擎:在 Elasticsearch 中利用 KNN 的力量

在快速准确的信息检索至关重要的时代&#xff0c;开发强大的搜索引擎至关重要。 随着大型语言模型和信息检索架构&#xff08;如 RAG&#xff09;的出现&#xff0c;在现代软件系统中利用文本表示&#xff08;向量/嵌入&#xff09;和向量数据库已变得越来越流行。 在本文中&am…

Java工具库——commons-lang3的50个常用方法

未来的你&#xff0c;我亲爱的女孩&#xff0c;愿此刻无忧无虑&#xff0c;开心&#xff0c;快乐… 工具库介绍 Apache Commons Lang 3&#xff08;通常简称为Commons Lang 3&#xff09;是Apache Commons项目中的一个Java工具库&#xff0c;它提供了一系列实用的工具类和方法…

Android---如何同view进行渲染

ViewRootImpl 在 Activity、window 和 View 三者关系之间起着承上启下的作用。一方面&#xff0c;ViewRootImpl 中通过 Binder 通信机制&#xff0c;远程调用 WindowSession 将 View 添加到 Window 中&#xff1b;另一方面&#xff0c;ViewRootImpl 在添加 View 之前&#xff0…