Texture 列表内容倒置（inverted）指南：一行属性实现聊天式自底向上布局

移动开发UI组件【免费下载链接】TextureSmooth asynchronous user interfaces for iOS apps.项目地址https://gitcode.com/gh_mirrors/te/Texture点击查看免费下载ASTableNode与ASCollectionNode内置的inverted属性可将列表内容从顶部到底部自动翻转为底部到顶部排列——即indexPath (0, 0)对应的首条数据出现在屏幕最底部而非最顶部。这种布局正是聊天、即时消息类 App 的标准交互形态。读完本文你将掌握 inverted 属性的声明与赋值方式、配套的 contentInset 调整细节、底层实现原理通过 CATransform3D 缩放矩阵翻转节点并能参考仓库中的 SocialAppLayout-Inverted 示例搭建一个可运行的倒置列表。inverted 属性一条属性完成的列表倒置在 TextureAsyncDisplayKit中ASTableNode和ASCollectionNode各自暴露了一个BOOL类型的inverted属性。文档明确强调启用后first即 indexPath 0, 0的节点会排布在底部而非通常的顶部这对聊天/消息类应用极为方便而 Texture 只需设置一个属性即可实现。从源码声明看该属性挂在节点类上Source/ASTableNode.h 中声明了property (nonatomic) BOOL inverted;对应的ASCollectionNode.h同样声明了这一属性需要特别注意的是较早版本中该属性也曾存在于视图层Source/ASTableView.h 中仍保留了带废弃警告的inverted声明其废弃提示明确写着 Use ASTableNode property instead.因此在现代写法中应统一通过tableNode.inverted/collectionNode.inverted来设置。一个属性两套节点体系从 Source/ASTableNode.mm 与 Source/ASCollectionNode.mm 的实现可以看到同一段逻辑self.transform inverted ? CATransform3DMakeScale(1, -1, 1) : CATransform3DIdentity;也就是说开启inverted后节点容器自身会被施加一个Y 轴取反的缩放矩阵CATransform3DMakeScale(1, -1, 1)坐标系的 Y 方向上下颠倒内容自然就从从上往下排变成了从下往上排关闭时恢复为单位矩阵CATransform3DIdentity。必配步骤调整 contentInset 与 scrollIndicatorInsets仅仅开启inverted还不够。由于整个坐标系被翻转原本出现在顶部的导航栏、状态栏等系统元素相对于内容的位置也随之颠倒。文档指出开发者还需要额外一步——调整ASTableNode或ASCollectionNode的contentInset以补偿顶部系统栏占据的高度从而保证列表内容尤其是第一条消息不会被导航栏遮挡滚动指示器位置也正确。文档给出了 Objective-C 与 Swift 两个版本的完整配置示例Objective-CCGFloat inset [self topBarsHeight]; self.tableNode.view.contentInset UIEdgeInsetsMake(0, 0, inset, 0); self.tableNode.view.scrollIndicatorInsets UIEdgeInsetsMake(0, 0, inset, 0);Swiftlet inset self.topBarsHeight self.tableNode.view.contentInset UIEdgeInsets(top: 0.0, left: 0.0, bottom: inset, right: 0.0) self.tableNode.view.scrollIndicatorInsets UIEdgeInsets(top: 0.0, left: 0.0, bottom: inset, right: 0.0)注意示例中 inset 被加在bottom底部因为内容已被上下翻转导航栏/状态栏在视觉上占据的是翻转后的底部区域。scrollIndicatorInsets需要同步设置否则滚动指示条会与内容错位。示例项目中的完整实践仓库中的 examples/SocialAppLayout-Inverted 项目演示了倒置列表的完整接入方式。在 Sample/ViewController.m 中_tableNode [[ASTableNode alloc] initWithStyle:UITableViewStylePlain]; _tableNode.inverted YES; self [super initWithNode:_tableNode];随后在viewWillAppear:中依据实际导航栏高度设置 insetSample/ViewController.mCGFloat inset [self topBarsHeight]; self.tableNode.contentInset UIEdgeInsetsMake(-inset, 0, inset, 0); self.tableNode.view.scrollIndicatorInsets UIEdgeInsetsMake(-inset, 0, inset, 0);topBarsHeight的取值逻辑值得注意Sample/ViewController.m它会先判断edgesForExtendedLayout是否包含UIRectEdgeTop——若页面没有延伸到顶部安全区域直接返回 0无需任何补偿否则返回导航栏 frame 高度与状态栏高度的总和。UIEdgeInsetsMake(-inset, 0, inset, 0)中 top 取负值、bottom 取正值本质上是先翻转再回补翻转后顶部多出的空间被反向吃掉底部再补回同等高度从而让首条数据恰好从导航栏下方开始显示。底层原理翻转发生在 Cell 节点创建之时inverted并不仅是简单地翻转容器。从源码看翻转变换是逐个施加到每个 cell 节点上的在 Source/ASTableView.mm 的 cell 包装 block 中若_inverted为真则执行node.transform CATransform3DMakeScale(1, -1, 1)在 Source/ASCollectionView.mm 的 cell 节点创建路径中同样如此甚至在 supplementary补充视图节点的创建路径中也做了相同的翻转处理Source/ASCollectionView.mm确保 header/footer 等补充视图在倒置布局下方向一致。这种节点级翻转 容器级翻转的双重设计保证数据源中的顺序indexPath 0 在最前保持不变只是视觉上自底向上呈现而每个 cell 内部的子内容被翻转了两次容器一次、cell 一次因此文本、图片等元素最终保持正向可读不会出现上下颠倒的文字。适用场景与注意事项聊天 / 即时通讯这是 inverted 最典型的应用场景——新消息追加在底部、列表初始定位在底部、滚动方向自下而上与微信、iMessage 等主流聊天 App 的交互习惯一致。设置项只需tableNode.inverted YES或collectionNode.inverted YES并在合适的时机如viewWillAppear:同步设置contentInset与scrollIndicatorInsets。安全区域与系统栏inset 补偿值应随导航栏/状态栏高度变化动态计算示例项目提供了判断edgesForExtendedLayout的参考实现。API 归属优先使用节点层ASTableNode/ASCollectionNode的属性避免使用已被标记废弃的视图层同名属性。参考资源官方文档docs/_docs/inversion.md属性声明Source/ASTableNode.h翻转实现Source/ASTableNode.mm、Source/ASCollectionNode.mm、Source/ASTableView.mm、Source/ASCollectionView.mm完整示例工程examples/SocialAppLayout-Inverted可直接打开Sample.xcworkspace运行查看倒置时间线效果赞分享移动开发UI组件【免费下载链接】TextureSmooth asynchronous user interfaces for iOS apps.项目地址https://gitcode.com/gh_mirrors/te/Texture点击查看免费下载相关推荐Yeti 布局指南十七个内在布局、统一属性词汇表与容器响应模型Yeti 布局指南十七个内在布局、统一属性词汇表与容器响应模型 导读 本文是 YetiCSS first、零构建的原生布局与样式框架的布局体系完整指南前端在 React 应用中接入 Mastra 服务端mastra/react 完整使用指南在 React 应用中接入 Mastra 服务端mastra/react 完整使用指南 mastra/react 是 Mastra 官方提供的 React移动开发UI组件Hippy 布局样式完全指南Flex 弹性布局属性详解与 Yoga 底层实现原理Hippy 布局样式完全指南Flex 弹性布局属性详解与 Yoga 底层实现原理 Hippy 的样式排版全面采用 Flex 弹性布局本篇基于官方布局样式文档跨平台移动开发前端上一篇Miller 术语表全解析从记录模型、文件格式到 DSL 语法的一站式速查指南下一篇如何快速恢复Kopia备份数据Mount挂载、完整还原与单文件下载的3种方法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考