FractionallySizedBox 按比例设置Widget的尺寸

2024-06-03 05:48

本文主要是介绍FractionallySizedBox 按比例设置Widget的尺寸,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

FractionallySizedBox 按比例设置Widget的尺寸

有时候,应用的设计是按比例给出的,例如这样 : 按钮应该占应用宽度的70%

image-20200822151426410

这时可以使用FractionallySizedBox来实现.

构造方法

const FractionallySizedBox({Key key,this.alignment = Alignment.center,this.widthFactor,this.heightFactor,Widget child,
}) 

我们先看一下构造方法 :

  • alignment: 用来控制FractionallySizedBox在父组件的位置 , 默认是中间Alignment.center
  • widthFactor: 宽度系数,取0-1之间. 如0.8,代表宽度为可用尺寸的80%.
  • heightFactor: 高度系数,取0-1之间.
  • child: 需要设置的widget

关于heightFactor/widthFactor , 其所占的比例为可用尺寸的比例,一般为父组件的尺寸,并非屏幕的尺寸

使用

  1. 设置控件尺寸

使用FractionallySizedBox来包裹你想要设置的Widget,给它一个高度或宽度系数 , 例如 0.5表示可用尺寸的50%,即一半.

然后使用alignment来控制FractionallySizedBox应该显示在哪.

例如:

FractionallySizedBox(alignment: Alignment.bottomRight,heightFactor: 0.5,widthFactor: 0.5,child: YourWidget
)

image-20200822153005763

  1. 填充空白部分

假如有一行组件,比如一个左侧有一个图片, 右侧有一个文本,而中间相距10dp,

可能我们会使用SizedBox来填充:

          Row(children: [Image.network('imgurl'),SizedBox(width: 10),Text('文字'),],)

但如果二者之间的距离是按比例来的呢?

这时可以使用没有child的FractionallySizedBox来替代SizedBox()来填充空白区域.

image-20200822153229372

FractionallySizedBox(heightFactor: 0.1,)

如果是在Row或者Column中使用, 可以将这个FractionallySizedBox包装在Flexible中 :

Flexible(child: FractionallySizedBox(heightFactor: 0.1,),)

代码地址:github

扩展

按百分比设置一般涉及到屏幕尺寸适配 , 关于屏幕适配方案可以考虑使用flutter_screenutil

这篇关于FractionallySizedBox 按比例设置Widget的尺寸的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》:本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换(推荐方法)二、通过 settings.json 配置(项目级/全局)三、

如何Python使用设置word的页边距

《如何Python使用设置word的页边距》在编写或处理Word文档的过程中,页边距是一个不可忽视的排版要素,本文将介绍如何使用Python设置Word文档中各个节的页边距,需要的可以参考下... 目录操作步骤代码示例页边距单位说明应用场景与高级用China编程途小结在编写或处理Word文档的过程中,页边距是一个

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后,buf

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时,可以通过两种方式来设置超时时间:1.针对整个Feign Client设置超时时间

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》:本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在