Flutter SizedBox布局组件Widget使用示例详解

目录
  • 正文
  • child 的 constrains
  • 确定自己的大小
    • SizedBox 的命名构造函数们
      • SizedBox.expand
      • SizedBox.shrink
      • SizedBox.fromSize
      • SizedBox.square
  • 应用场景
    • 为 child 提供 tight 约束。
    • 为 children 之间提供空白。
    • 占位

正文

Flutter Sizedbox 是一个 布局组件，用来给 child 添加 tight 约束的，也可以用来添加空白。

width，height是 Sizedbox 的参数

 BoxConstraints get _additionalConstraints {
    return BoxConstraints.tightFor(width: width, height: height);
 }

final BoxConstraints constraints = this.constraints;
if (child != null) {
  child!.layout(_additionalConstraints.enforce(constraints),
      parentUsesSize: true);
  size = child!.size;
} else {
  size = _additionalConstraints.enforce(constraints).constrain(Size.zero);
}

enforce 方法根据 _additionalConstraints 返回一个新约束，新约束保证在参数 constraints 的范围之内。

以上就是 SizedBox 的布局逻辑，通过代码我们分析一下 child constrains， SizedBox size。

child 的 constrains

constrains 是 tight ，SizedBox 透传 constrains 给 child。

constrains 是 loose，width 为空，SizedBox 透传 minWidth，maxWith 给 child；height为空，SizedBox 透传 minHeight，maxHeight 给 child。

constrains 是 loose，width 不为空， 在 constrains 范围内 给 child 的 width tight 约束；height 不为空 在 constrains 范围内 给 child 的 height tight 约束。

确定自己的大小

如果有 child ，和 child 一样大。

没有child ，constrains 是 tight ，大小为约束最小值。

没有child ，constrains 是 loose，在约束范围内由 width，height 参数指定。

SizedBox 的命名构造函数们

SizedBox 虽然本身很简单，但它命名构造函数确实不少。我们平时用的时候大多忽略了这些命名构造函数，所以应该先混个脸熟，用这些命名构造函数还是有好处的，可以增加代码的可读性。

SizedBox.expand

使 SizedBox 获得最大 Size，也就是和父 widget 一样大。

const SizedBox.expand({ super.key, super.child })
    : width = double.infinity,
      height = double.infinity;

SizedBox.shrink

让 SizedBox 尽量小。

const SizedBox.shrink({ super.key, super.child })
    : width = 0.0,
      height = 0.0;

SizedBox.fromSize

通过 size 来构造 SizedBox。

SizedBox.fromSize({ super.key, super.child, Size? size })
    : width = size?.width,
      height = size?.height;

SizedBox.square

保证 SizedBox 是一个正方形。

  const SizedBox.square({super.key, super.child, double? dimension})
    : width = dimension,
      height = dimension;

应用场景

为 child 提供 tight 约束。

当指定了 width，height 参数后，child 就获得了宽高的 tight 约束。保证 child 有固定大小。这对于固定布局非常有用。

为 children 之间提供空白。

可以用 padding 添加空白，但那样会增加一层嵌套，用 SizedBox 充当空白看起来更好一些。

占位

只是用来占位，比如 Spacer 中的 child 用的就是 SizedBox.shrink。

class Spacer extends StatelessWidget {
  const Spacer({super.key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0);
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

以上就是Flutter SizedBox布局组件Widget使用示例详解的详细内容，更多关于Flutter SizedBox布局组件Widget的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue.js样式布局Flutter业务开发常用技巧

    阴影样式中flutter和css对应关系 UI给出的css样式 width: 75px; height: 75px; background-color: rgba(255, 255, 255, 1); border-radius: 4px; box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08); flutter样式布局 Container( constraints: BoxConstraints.tightFor(width: 75, height:

  • flutter中使用流式布局示例详解

    flutter中使用流式布局示例详解

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow layout,也就是流式布局. 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow.事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可

  • flutter布局约束原理深入解析

    目录 引言 1.flutter的widget类型 2.Container是个组合类 3.flutter布局约束 4.Container布局行为解惑 总结 引言 刚开始接触flutter的时候,Container组件是用得最多的.它就像HTML中的div一样普遍,专门用来布局页面的. 但是使用Container嵌套布局的时候,经常出现一些令人无法理解的问题.就如下面代码,在一个固定的容器中,子组件却铺满了全屏. /// 例一 @override Widget build(BuildContext

  • flutter中的布局和响应式app方法示例

    目录 flutter中的布局 (使用)放置一个组件 app 本身就是个组件 Material apps 和 Non-Material apps 自适应和响应式 flutter实现响应式的方法 小结 flutter中的布局 flutter布局机制的核心是组件.在flutter中,几乎所有的东西都是组件,布局模型也不例外.图片,Icon, 文本等等,我们在flutter客户端中看到的所有内容都是组件.我们看不到的东西,比如:rows,columns,等等等等也都是组件. 我们将简单的组件组合在一起,

  • 详解如何在Flutter中用小部件创建响应式布局

    详解如何在Flutter中用小部件创建响应式布局

    目录 前提条件 使用容器的问题 展开式小组件的介绍 灵活小组件的介绍 设置一个示例应用程序 代码执行 扩展的小部件例子 灵活部件的例子 扩大的和灵活的部件之间的区别 总结 构建响应式屏幕布局意味着编写一段代码,以响应设备布局的各种变化,因此应用程序会根据设备的屏幕尺寸和形状显示其UI. 在这篇文章中,我们将探讨Flutter中用于屏幕响应的扩展和灵活部件. 由于Flutter的跨平台.单一代码库的能力,了解屏幕管理以防止像柔性溢出错误或糟糕的用户界面设计这样的问题是至关重要的. 我们还将设计一个

  • Flutter 弹性布局基石flex算法flexible示例详解

    目录 flex 布局算法 非弹性组件在 main 轴受到的约束是 unbounded fit 参数 Expanded Spacer flex 布局算法 Flutter 弹性布局的基石 是 flex 和 flexible.理解了这两个 widget,后面的row,column 就都轻而易举了.本文用示例的方式详细介绍 flex 的布局算法. 先布局 flex 为 0 或 null 的 child.在 main 轴上 child 受到的约束是 unbounded.如果 crossAxisAlignm

  • Flutter SizedBox布局组件Widget使用示例详解

    目录 正文 child 的 constrains 确定自己的大小 SizedBox 的命名构造函数们 SizedBox.expand SizedBox.shrink SizedBox.fromSize SizedBox.square 应用场景 为 child 提供 tight 约束. 为 children 之间提供空白. 占位 正文 Flutter Sizedbox 是一个 布局组件,用来给 child 添加 tight 约束的,也可以用来添加空白. width,height是 Sizedbox

  • Flutter状态管理Provider的使用示例详解

    目录 前言 计数器 全局状态 总结 前言 Provider是三大主流状态管理框架官方推荐使用的框架,它是基于官方数据共享组件InheritedWidget实现的,通过数据改变调用生命周期中的didChangeDependencies()方法,来实现状态的通知改变. InheritedWidget的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结. 计数器 还是以计数器为例,这次通过Provider实现,provider相较于bloc并没有那么强制性分层,所以这里我们自己分为数据层(

  • 比ant更丰富Modal组件功能实现示例详解

    目录 有哪些比ant更丰富的功能 render部分 渲染黑色蒙层 渲染弹框主体 设置body overflow:hiiden 有哪些比ant更丰富的功能 普通的modal组件如下: 我们写的modal额外支持,后面没有蒙版,并且Modal框能够拖拽 还支持渲染在文档流里,上面的都是fixed布局,我们这个正常渲染到文档下面: render部分 <RenderDialog {...restState} visible={visible} prefixCls={prefixCls} header={

  • Flutter Module添加到iOS项目示例详解

    Flutter Module添加到iOS项目示例详解

    目录 1. 创建flutter module 2. flutter 模块嵌入原生应用 3. flutter模块和原生通信 小结 1. 创建flutter module 摘要:我们实际开发开始作为混合开发,可能会把一个模块使用flutter开发,之后嵌入到iOS项目中.比如说我们的商城模块使用flutter开发,这样android和iOS都可以使用. 我们通常会把iOS项目和 flutter module在同一目录,我们创建一个商城的module flutter create --template

  • svgicon组件使用方法示例详解

    svgicon组件使用方法示例详解

    目录 场景 编写SvgIcon组件 组件文件结构 icons文件结构 vue.config.js配置 最终效果 场景 最近在研发产品的过程中,ued切了很多svg的图片:咱们在使用过程中除了背景图再就是使用<img :src="url"/>进行使用. 在你进行公共组件编写的时候,使用图片路径这种方式编写完组件发布之后:在再项目中引入已发布的组件,在你运行代码的时候图片路径会附带上当前运行的域名,导致图片显示不出来. 那么怎么解决这种问题呢? 和UED进行沟通让他们把这种sv

  • 微前端之Web组件自定义元素示例详解

    目录 我们知道的 Web组件使用 名称规范 组件传参数并可以写模板包括js和css Shadow Dom 影子节点 类中的构造函数和钩子函数 getter/setter属性和属性反射 扩展原生 HTML 我们知道的 第一:我们熟知的HTML标签有 a, p, div, section, ul, li, h2, article, head, body, strong, video, audio 等等 第二:我们知道,a标签是链接,p标签是段落,div是块级,h2是字体,strong 是粗体,vid

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • React实现数字滚动组件numbers-scroll的示例详解

    目录 一.设计原理 二.实现方式 三.使用方式 四.参数说明 数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件,第一反应就是想找找网上大佬的东西顶礼膜拜一下,这一搜,还真是没找到趁手的╮(╯▽╰)╭. 最近接了大屏的需求,数字滚动肯定是免不了的,所以开始撸袖子,造轮子了( numbers-scroll ). 首先给大家看下轮子的效果吧: 一.设计原理 如果要做到数字滚动效果,就一定要让数字有从下往上移动的感觉.如果只是纯粹的数字变化,显示出来的效果就会比较普通了,没有什么视

  • Flutter之可滚动组件子项缓存 KeepAlive详解

    Flutter之可滚动组件子项缓存 KeepAlive详解

    本文为大家分析了Flutter之可滚动组件子项缓存 KeepAlive,供大家参考,具体内容如下 首先回想一下,在介绍 ListView 时,有一个addAutomaticKeepAlives 属性我们并没有介绍,如果addAutomaticKeepAlives 为 true,则 ListView 会为每一个列表项添加一个 AutomaticKeepAlive 父组件.虽然 PageView 的默认构造函数和 PageView.builder 构造函数中没有该参数,但它们最终都会生成一个 Sli

  • Flutter 首页必用组件NestedScrollView的示例详解

    昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能.修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本,建议慎重,有些人升级后项目无法运行. 今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件. 可以在其内部嵌套其他滚动视图的滚动视图,其滚动位置是固有链接的. 在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,

随机推荐