【布局 Widget】 Flutter SizedBox

简介: 【布局 Widget】 Flutter SizedBox

image.png

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(),
    );
  }
}


目录
相关文章
|
6天前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
6天前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
5天前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
6天前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
6天前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
6天前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
6天前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
6天前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
6天前
|
容器
Flutter笔记:Box协议的布局约束原理与应用
Flutter笔记:Box协议的布局约束原理与应用
49 0
|
6天前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
141 0