【免费下载链接】NativeScript⚡ Write Native with TypeScript ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Flutter and you name it compatible.项目地址https://gitcode.com/gh_mirrors/na/NativeScript点击查看免费下载本篇技术指南以 NativeScript 官方自动化测试应用中的wrap-layout.md文档为骨架结合nativescript/core中 WrapLayout 的源码实现与自动化测试用例系统讲解 WrapLayout 的 XML 声明、代码创建、方向orientation切换、itemWidth/itemHeight 尺寸控制、padding 参与布局计算以及百分比子视图等完整知识点。读完本篇你将能够熟练使用 WrapLayout 实现流式换行布局并能理解其测量与布局的底层原理。WrapLayout 是什么WrapLayout是 NativeScript 核心布局容器LayoutBase家族中的一员位于 packages/core/ui/layouts/wrap-layout 目录。它的行为类似于流式布局flow layout子视图按照指定方向依次排列当一行或一列的空间被填满后自动换行wrap到下一行或下一列。其官方类型声明index.d.ts对其定位描述为WrapLayout 依据 orientation 属性将子视图按行或列排布直到空间被填满然后在新的行或列上继续排布。典型应用场景包括标签云、图标宫格、按钮组、商品分类区等需要流式换行的 UI 区域。使用 WrapLayout 需要引入其模块源码见 wrap-layout-tests.tsimport * as wrapLayoutModule from nativescript/core/ui/layouts/wrap-layout;在 XML 中声明 WrapLayout使用WrapLayout标签即可在页面中声明一个换行布局容器。其内部可以放置任意多个子视图例如原文档给出的四个 Label 示例wrap-layout.mdPage WrapLayout Label textThis is Label 1 / Label textThis is Label 2 / Label textThis is Label 3 / Label textThis is Label 4 / /WrapLayout /Page在默认配置下这 4 个 Label 会按水平方向从左到右排布当容器宽度不足以容纳当前行的所有子视图时超出的部分会自动换到下一行。这一装不下就换行的行为正是 WrapLayout 与 StackLayout、GridLayout 的核心区别。以代码方式创建 WrapLayout除了 XML 声明WrapLayout 也支持完全用 TypeScript 代码创建。原文档对应的代码片段snippetwrap-layout-new在自动化测试中被展开为如下形式wrap-layout-tests.tsconst wrapLayout new wrapLayoutModule.WrapLayout(); wrapLayout.width { value: 200, unit: px }; wrapLayout.height { value: 200, unit: px }; for (let i 0; i 2; i) { let label new Label(); label.text i; label.width { value: 100, unit: px }; label.height { value: 100, unit: px }; wrapLayout.addChild(label); } return wrapLayout;这段代码展示了几个关键点通过new wrapLayoutModule.WrapLayout()即可实例化布局布局自身的width/height以及子视图的尺寸都可以用{ value, unit }的Length对象指定如{ value: 100, unit: px }表示 100 物理像素子视图通过addChild(label)逐个挂载进布局。当 2 个 100x100px 的 Label 放进 200x200px 的容器时第一个 Label 占据左上角left0, top0, right100, bottom100第二个 Label 水平排布在其右侧left100, top0, right200, bottom100——这一布局结果被测试方法testHorizontalOrientation严格断言wrap-layout-tests.ts。设置布局方向 orientationWrapLayout 通过orientation属性控制排布方向取值只有两个horizontal默认和vertical。原文档的 snippetwrap-layout-orientation在测试中的用法为wrap-layout-tests.tswrapLayout.orientation vertical;两种方向的行为horizontal默认子视图按行排布一行填满后换到下一行vertical子视图按列排布一列填满后换到下一列。测试testVerticalOrientation验证了在 200x200px 容器中放置两个 100x100px 子视图时垂直方向下第一个子视图位于 (0, 0, 100, 100)第二个子视图排在其正下方 (0, 100, 100, 200)。而testChangeOrientation则验证了运行期动态切换方向后布局会立即重新计算并正确换向wrap-layout-tests.ts。orientation 的底层实现从源码看orientation是一个注册在WrapLayoutBase上的属性wrap-layout-common.tsconst converter makeParserCoreTypes.OrientationType( makeValidatorCoreTypes.OrientationType( CoreTypes.Orientation.horizontal, CoreTypes.Orientation.vertical ) ); export const orientationProperty new PropertyWrapLayoutBase, CoreTypes.OrientationType({ name: orientation, defaultValue: CoreTypes.Orientation.horizontal, affectsLayout: __APPLE__, valueConverter: converter, }); orientationProperty.register(WrapLayoutBase);注意两点默认值是CoreTypes.Orientation.horizontal也就是说不设置方向时按水平换行排布valueConverter通过makeValidator只接受horizontal/vertical两个合法取值传入其他值会在解析阶段被过滤从而保证布局算法只处理两种确定的方向。在测量阶段orientation直接决定了换行算法的分支iOS 平台实现 index.ios.ts 中通过const isVertical this.orientation vertical;进入不同的换行计算逻辑。统一控制子视图尺寸itemWidth 与 itemHeight在实际开发中往往希望布局内所有子项使用统一的尺寸例如标签云里每个标签等宽。WrapLayout 为此提供了itemWidth和itemHeight两个属性它们会覆盖子视图自身测量出的尺寸作为每个子项的统一宽高。根据官方类型声明index.d.tsitemWidth用于测量和布局每个子视图的宽度默认值为Number.NaN即不限制子视图使用子视图自身尺寸itemHeight用于测量和布局每个子视图的高度默认值同为Number.NaN不限制子视图。属性的定义位于 wrap-layout-common.ts其默认值为auto并经由Length.parse解析、Length.toDevicePixels换算为设备像素后存入effectiveItemWidth/effectiveItemHeight供测量与布局阶段直接使用export const itemWidthProperty new PropertyWrapLayoutBase, CoreTypes.LengthType({ name: itemWidth, defaultValue: auto, affectsLayout: __APPLE__, equalityComparer: Length.equals, valueConverter: Length.parse, valueChanged: (target, oldValue, newValue) (target.effectiveItemWidth Length.toDevicePixels(newValue, -1)), }); itemWidthProperty.register(WrapLayoutBase);用法示例与测试验证设置方式与普通 Length 属性一致wrap.itemWidth { value: 40, unit: px }; wrap.itemHeight { value: 40, unit: px };自动化测试testItemWidhtItemHeightwrap-layout-tests.ts验证了该属性的强制覆盖行为即使某个子视图自身声明了 80x80px 的尺寸当布局设置了 40px 的itemWidth/itemHeight后该子视图的测量尺寸与最终布局尺寸都会被强制统一为 40x40px。其他相关测试还覆盖了运行期修改itemWidth后第二个子视图的 left 位置会从 100 变为 50testChangeItemWidth当itemWidth大于可用宽度如设为 1000px时每个子项独占一行第二个子视图被换到下一行 top100testItemWidthLargerThanTheAvailableWidth垂直方向下itemHeight大于可用高度时同理逐列换排testItemHeightLargerThanTheAvailableHeight。测量与布局的底层算法WrapLayout 的测量onMeasure与布局onLayout核心逻辑在 iOS 平台实现 index.ios.ts 中Android 平台实现位于 index.android.ts二者行为一致、共用WrapLayoutBase。子视图的测量约束测量阶段通过getChildMeasureSpecindex.ios.ts为每个子视图生成测量规格若设置了itemWidth/itemHeight值大于 0子视图按固定尺寸EXACTLY测量若父容器为UNSPECIFIED模式未受约束如滚动容器内子视图按未约束模式测量否则按父容器的可用尺寸以AT_MOST模式测量。换行排布逻辑测量循环index.ios.ts的核心思路是用remainingWidth/remainingHeight跟踪当前行列的剩余空间水平方向下若childMeasuredWidth remainingWidth说明当前行放不下行号rowOrColumn子项换到下一行用_lengths数组记录每一行的高度水平方向或每一列的宽度垂直方向供后续 onLayout 对齐使用最后累加各行高度水平或各列宽度垂直加上 padding/border 得到布局自身的测量尺寸并应用 min/max 尺寸约束index.ios.ts。布局阶段的对齐onLayoutindex.ios.ts阶段计算有效 padding 与安全区safe area insets后得到起始坐标水平方向下子项从左到右排布childLeft childWidth childrenWidth且还有剩余高度时换到下一行并依据_lengths记录的行高对齐垂直方向下子项从上到下排布超出childrenHeight时换到下一列。从源码结构可以推断这种测量时记录行高/列宽、布局时按记录对齐的两段式设计保证了同一行内的子视图即使高度不一也会按该行最大高度对齐这正是 WrapLayout 呈现整齐行/列边界的原因。Padding 如何参与布局计算WrapLayout 的 padding以及 border会被计入可用空间的扣除项也就是说子视图只能在 padding 以内的区域排布。iOS 实现中const horizontalPaddingsAndMargins this.effectivePaddingLeft this.effectivePaddingRight this.effectiveBorderLeftWidth this.effectiveBorderRightWidth; const availableWidth widthMode layout.UNSPECIFIED ? Number.MAX_VALUE : width - horizontalPaddingsAndMargins;padding在 layout-base-common.ts 中代理到视图的 style 对象设置方式为wrap.style.paddingLeft wrap.style.paddingTop wrap.style.paddingRight wrap.style.paddingBottom { value: 10, unit: px };自动化测试从多个角度验证了 padding 的语义wrap-layout-tests.tstestPaddingReduceAvailableSize容器四周 padding 10px 时200px 可用空间内子视图的测量与布局尺寸都被压缩为 180px200−10−10testPaddingLeftAndTop子视图会从(paddingLeft, paddingTop)坐标开始排布即 (20, 30)testPaddingRight/testPaddingBottom右侧或底部有 padding 时剩余空间不足的子视图会正确换到下一行/列例如 200px 宽容器内 paddingRight30px第一个子视图宽 100px 后剩余 70px第二个宽 80px 的子视图放不下被换到第二行。百分比尺寸与对齐支持WrapLayout 也支持子视图使用百分比尺寸与 margin这一能力由test_percent_children_support验证wrap-layout-tests.tslayout.width { value: 200, unit: px }; layout.height { value: 200, unit: px }; const btn new layoutHelper.MyButton(); btn.horizontalAlignment left; btn.verticalAlignment top; (anybtn).width 50%; (anybtn).height 50%; btn.margin 10%; btn.text 1; layout.addChild(btn);测试断言200px 容器中宽高均为 50%、margin 10% 的子视图测量尺寸为 100x100px布局位置为 left20、top20、right120、bottom120即 200px × 10% 20px 的 margin 偏移。测试还验证了在left/top、center/middle、stretch/stretch、right/bottom四种对齐组合下百分比尺寸的测量与布局结果保持一致。这一特性使 WrapLayout 在响应式场景下可以直接用百分比控制子项尺寸无需在代码中手动换算像素。结语WrapLayout 以简单的 APIorientation、itemWidth、itemHeight提供了强大的流式换行能力默认水平方向按行排布、空间不足自动换行切换为vertical后按列排布itemWidth/itemHeight可强制统一子项尺寸padding 与百分比尺寸均被正确纳入测量与布局计算。建议读者进一步对照以下仓库文件深入理解官方 HOW-TO 文档wrap-layout.md自动化测试用例含全部 snippet 展开与布局断言wrap-layout-tests.ts公共属性与默认值定义wrap-layout-common.ts测量与布局核心算法iOS 实现index.ios.ts平台类型声明index.d.ts布局模块统一导出packages/core/ui/layouts/index.ts赞分享【免费下载链接】NativeScript⚡ Write Native with TypeScript ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java, Dart). Use what you love ❤️ Angular, React, Solid, Svelte, Vue with: iOS (UIKit, SwiftUI), Android (View, Jetpack Compose), Flutter and you name it compatible.项目地址https://gitcode.com/gh_mirrors/na/NativeScript点击查看免费下载相关推荐Security-101 安全运营SecOps能力指南SIEM、XDR 与安全运营增强技术详解Security 101 安全运营SecOps能力指南SIEM、XDR 与安全运营增强技术详解 安全运营SecOps是组织安全职能中负责监测、检测、Bokeh项目布局与尺寸控制实战sizing_mode参数详解Bokeh项目布局与尺寸控制实战sizing_mode参数详解 引言为什么需要sizing_mode 在数据可视化项目中布局管理往往是最令人头疼的问题之数据可视化图表库Kubernetes Contributor Summit 内容策划完全指南Events Content 子团队角色体系与实战手册解析Kubernetes Contributor Summit 内容策划完全指南Events Content 子团队角色体系与实战手册解析 导读 本指南以 Kub上一篇Python Fitparse终极指南3个核心技巧轻松解析Garmin运动数据下一篇终极指南如何用AI实现实时面部情感检测准确率高达85%创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考