Texture 自动布局基础：理解 ASLayout、ASLayoutElement 与 layoutSpecThatFits

移动开发UI组件【免费下载链接】TextureSmooth asynchronous user interfaces for iOS apps.项目地址https://gitcode.com/gh_mirrors/te/Texture点击查看免费下载本指南聚焦 TextureAsyncDisplayKit自动布局体系的基础知识围绕 docs/_docs/automatic-layout-basics.md 展开从 Box Model 布局模型、核心术语ASLayoutElement / ASLayoutSpec / ASLayout到 UIKit 组件在自动布局中的参与方式。读完本文你将掌握 Texture 布局树如何被构建与计算能够正确地重写layoutSpecThatFits:并理解约束ASSizeRange在整个递归中的传递机制。从 UIKit 手动布局到 Texture 自动布局在 UIKit 中UIView实例把自身的位置和尺寸分别存放在center与bounds两个属性中。当约束发生变化时Core Animation 会执行一次布局流程回调layoutSubviews要求视图更新其子视图的这些属性。这是一套由系统驱动、以视图层级为基础的布局机制。Texture 的自动布局则完全不同。文档明确指出符合布局协议的对象即所有ASDisplayNode及其子类自身不保存任何尺寸或位置信息。相反Texture 会以给定的尺寸约束调用layoutSpecThatFits:方法组件必须返回一个描述结构——这个结构既要说明自身的大小也要说明所有子元素的位置和大小。也就是说布局信息不是通过逐级设置 frame 来传递而是通过一次完整的布局树计算一次性得出。从当前仓库源码看这一调用链由 Source/ASDisplayNodeLayoutSpec.h 中的ASDisplayNode (ASLayoutSpecSubclasses)分类定义子类重写- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize;系统在非主线程上调用它来生成ASLayout并缓存。文档和头文件都特别强调该方法的返回值会被ASDisplayNode缓存供后续-layout阶段快速访问因此不要在方法内做无谓的重复计算可以用 ivar 缓存有价值的中间结果。核心术语自动布局的四个参与者原文档提醒术语有点令人困惑并给出了完整的参与者清单。对照当前仓库源码这套体系已经完成了从早期ASLayoutable到ASLayoutElement的命名演进ASLayoutable在 Source 目录中已不存在取而代之的是 Source/Layout/ASLayoutElement.h 中的ASLayoutElement协议但职责划分与原文档完全一致ASLayoutElement 协议布局树的统一抽象符合ASLayoutElement协议的对象声明了一种测量对象布局的方法。一份布局由ASLayout返回值定义并且必须同时指定1该布局元素自身的大小不含位置2其所有直接子元素的大小和位置。树形递归由父节点驱动父节点先向子节点请求布局以确定自身大小待大小已知后再设置子节点的位置。该协议还实现了一族布局元素协议——即各类AS{*}LayoutSpec使用的布局选项协议。例如ASStackLayoutSpec拥有定义元素如何根据可用空间收缩或生长的选项。所有这些布局选项都存储在ASLayoutElementStyle类中定义于 Source/Layout/ASLayoutElementPrivate.h正常情况下你无需关心这个存储类因为布局元素协议通过便捷属性直接暴露选项访问。只有在创建自定义布局 spec 时才需要扩展背后的 style 类以容纳新的布局选项。从 Source/Layout/ASLayoutElement.h 可以看到ASLayoutElementType枚举明确了参与布局的两类对象typedef NS_ENUM(unsigned char, ASLayoutElementType) { ASLayoutElementTypeLayoutSpec, // 布局 spec ASLayoutElementTypeDisplayNode // 显示节点 };协议对外暴露的关键接口包括- (nullable NSArrayidASLayoutElement *)sublayoutElements;返回符合协议的所有子元素- (ASLayout *)layoutThatFits:(ASSizeRange)constrainedSize;基于给定尺寸范围返回布局该方法有缓存副作用子类不得重写- (ASLayout *)layoutThatFits:(ASSizeRange)constrainedSize parentSize:(CGSize)parentSize;供你在-calculateLayoutThatFits:内部对子元素调用以计算它们的布局同样禁止重写。所有ASDisplayNode及其子类、所有ASLayoutSpec都遵循这一协议这使得节点与布局 spec 可以统一地参与布局树计算。ASLayoutSpec不可变的布局描述ASLayoutSpec是不可变对象用于描述一种布局其头文件注释形容它loosely inspired by React。布局 spec 的创建只应发生在用户的layoutSpecThatFits:中在该方法执行期间spec 可以被创建和修改一旦返回给 TextureisMutable标志就会被置为 NO任何后续修改都会触发断言。这一点在 Source/Layout/ASLayoutSpec.h 中有明确注释/** * Creation of a layout spec should only happen by a user in layoutSpecThatFits:. During that method, a * layout spec can be created and mutated. Once it is passed back to ASDK, the isMutable flag will be * set to NO and any further mutations will cause an assert. */ property (nonatomic) BOOL isMutable;每个ASLayoutSpec必须作用于至少一个子元素。ASLayoutSpec基类负责持有 spec 的子元素某些布局 spec如ASInsetLayoutSpec只需要单个子元素通过child属性设置另一些则支持多个子元素通过children属性设置。对于子元素数量固定的 spec如ASBackgroundLayoutSpec子类应当使用 Source/Layout/ASLayoutSpecSubclasses.h 中的-setChild:atIndex:来设置主子元素与其他必需子元素最好对外隐藏这一机制——例如ASBackgroundLayoutSpec对外暴露background属性背后实际就是在调用setChild:atIndex:。ASLayoutSpec的声明Source/Layout/ASLayoutSpec.h同时确认了它遵循ASLayoutElement、ASLayoutElementStylability、NSFastEnumeration等协议具备遍历子元素与样式化styling能力。文件中还附带了ASWrapperLayoutSpec——一个包装一个或多个布局元素、并按子元素大小计算自身尺寸的基础 spec适合作为自定义 spec 的参照。ASLayout计算完成的不可变布局树ASLayout表示一棵计算完成的不可变布局树由符合ASLayoutElement协议的对象返回。原文档提醒除了知道它代表计算后的布局树之外通常无需深入关注它。但从 Source/Layout/ASLayout.h 可以补充确认其结构每个ASLayout持有layoutElement创建它的弱引用元素、type元素类型、size自身大小、position在父节点中的位置默认ASPointNull即 {NAN, NAN}、sublayouts子布局数组每个子布局必须具有有效的非空位置以及便捷方法-frameForElement:与frame属性。值得注意的还有该文件顶部的两个全局函数ASCalculateRootLayout(idASLayoutElement rootLayoutElement, const ASSizeRange sizeRange)安全地计算根布局元素的布局对 nil 节点有防护ASCalculateLayout(idASLayoutElement layoutElement, const ASSizeRange sizeRange, const CGSize parentSize)安全地计算某个元素在指定父尺寸下的布局。这两个函数是布局树递归计算的底层入口体现了父请求子布局 → 父设置子位置的驱动模式。约束ASSizeRange布局计算的输入布局计算的输入是ASSizeRange——一个由最小尺寸与最大尺寸构成的范围。在layoutSpecThatFits:中constrainedSize即接收者应该容纳的最小和最大尺寸。文档与源码Source/ASDisplayNodeLayoutSpec.h都强调该参数constrainedSize定义了接收者必须满足的尺寸区间。当父节点的某个维度尺寸尚未确定例如父节点的宽度依赖子节点宽度时需要使用ASLayoutElementParentDimensionUndefined定义于 Source/Layout/ASLayoutElement.h来表示该维度未定这两个常量分别是单维度未定与双维度均未定的标记。此外仓库还提供了块block形式的布局声明方式layoutSpecBlock见 Source/ASDisplayNodeLayoutSpec.h它接受(node, constrainedSize)并返回一个ASLayoutSpec与重写layoutSpecThatFits:的输入输出关系完全一致。文档与头文件都给出警告子类实现了layoutSpecThatFits:就不得再使用layoutSpecBlock反之亦然否则会触发异常。对应的约束校验也能在源码中看到ASDisplayNodeSubclasses.h中的编译期断言要求子类要么提供layoutSpecBlock要么在-calculateLayoutThatFits:、-layoutSpecThatFits:、-calculateSizeThatFits:三个方法中至多重写一个否则会触发编译错误提示。常见布局 spec 的选项速览ASStackLayoutSpec是自动布局中最常用的 spec其核心选项Source/Layout/ASStackLayoutSpec.h与原文档如何根据可用空间收缩或生长的描述直接对应directionASStackLayoutDirection主轴方向决定子元素沿水平还是垂直排列spacingCGFloat子元素之间的间距justifyContentASStackLayoutJustifyContent主轴方向上的对齐与空间分配策略alignItemsASStackLayoutAlignItems交叉轴方向上的对齐方式。这些选项与 CSS Flexbox 的对应属性高度相似是理解 Texture 布局盒模型语义的钥匙。当需要精确控制某个子元素的伸缩行为时则应通过布局元素协议暴露的便捷属性如 flex shrink / flex grow 相关选项在子元素自身声明而非在 spec 上设置。在布局中接入 UIKit 组件对于 UIKit 组件原文档给出了两条明确的接入规则这在实际开发中极易踩坑直接添加的 UIView如果UIView是被直接添加到视图层级中的你仍然需要在didLoad:中手动为其布局设置 frame。因为这类视图不属于布局元素协议体系自动布局引擎不会为它计算位置与大小。通过 block 创建的 UIView如果是通过[ASDisplayNode initWithViewBlock:]或其变体创建的UIView则可以将其包装在ASDisplayNode中进而纳入layoutSpecThatFits:的布局树参与自动布局。从源码看didLoad:正是视图加载完成的回调Source/ASDisplayNodeSubclasses.h标注了ASDISPLAYNODE_REQUIRES_SUPER适合在节点视图首次加载后做一次性配置。而initWithViewBlock:创建的节点其view由 block 惰性生成因此可以被布局 spec 正常持有和计算。小结与下一步Texture 自动布局的核心心智模型可以概括为三句话节点不持有尺寸/位置信息布局结果由layoutSpecThatFits:返回的布局树一次性计算得出ASLayoutElement协议统一了节点与布局 specASLayoutSpec描述布局策略ASLayout是计算完成的结果树UIKit 视图要么在didLoad:手动布局要么经initWithViewBlock:包装后融入自动布局体系。掌握这些基础后可以继续阅读 自动布局容器指南涵盖ASStackLayoutSpec等容器类 spec 的组合使用或深入 ASDisplayNodeSubclasses.h 查看-calculateLayoutThatFits:与-calculateSizeThatFits:的完整方法族理解三条布局计算路径各自适用的场景。赞分享移动开发UI组件【免费下载链接】TextureSmooth asynchronous user interfaces for iOS apps.项目地址https://gitcode.com/gh_mirrors/te/Texture点击查看免费下载相关推荐Texture 布局组合实战深入理解 layoutSpecThatFits: 方法与 ASLayoutSpec 声明式布局Texture 布局组合实战深入理解 layoutSpecThatFits: 方法与 ASLayoutSpec 声明式布局 本文是 TextureAsync移动开发UI组件在 React 应用中接入 Mastra 服务端mastra/react 完整使用指南在 React 应用中接入 Mastra 服务端mastra/react 完整使用指南 mastra/react 是 Mastra 官方提供的 React移动开发UI组件Texture 手动布局完全指南calculateSizeThatFits 与 layout 的实战用法Texture 手动布局完全指南calculateSizeThatFits 与 layout 的实战用法 TextureAsyncDisplayKit以自移动开发UI组件上一篇终极Web管理解决方案iris-admin如何为Gin/Iris框架注入强大管理能力下一篇如何在5分钟内构建多人协作应用PartyKit与Tinybase集成终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考