个人主页杨利杰YJlio❄️个人专栏《Windows 疑难杂症与工单复盘案例库》 《Sysinternals实战教程》《WINDOWS教程》 《Windows PowerShell 实战》 《IOS插件分析测试》《超简单用Python让Excel飞起来》让复杂的事情更简单让重复的工作自动化文章目录前言先搭一个静态页面一、先读模板中的入口与组件声明二、从外向内读组件树三、用三段静态文字构成最小示例四、分别看间距、内边距与对齐五、静态修改后确认完整运行路径六、布局不对时先查外层容器七、在不同窗口里观察换行与留白八、静态页面与状态更新分开学习学习总结参考资料前言先搭一个静态页面大家好我是杨利杰 YJlio。前几篇准备了数据与显示分支。这篇开始阅读 ArkUI 页面结构先确认入口再看外层容器最后读里面的文字和属性。这是 HarmonyOS 7.0 学习笔记第 09 篇。我先用三段静态文字练习声明式结构暂不加入按钮、输入和动态状态让页面变化更容易观察。组件文件存在不代表它已经被当前工程加载为首屏。环境项实际记录DevEco Studio待填写SDK/API待填写实际入口页面路径待填写运行设备与系统待填写窗口尺寸待填写本文代码为简化学习示例图片为结构与观察方法示意未进行本机编译和设备运行不以配图代替真实页面截图。一、先读模板中的入口与组件声明我会先打开当前模板已使用的页面查看组件名、入口标记和build()再判断哪里需要修改。华为ArkTS 声明式组成说明介绍了入口组件、自定义组件、UI 描述与属性方法。这里采用常见的Entry、Component结构作为学习示例。位置本篇阅读重点Entry页面入口标记Component自定义组件声明struct Index本例组件名build()UI 结构描述模板若采用不同组件声明或状态管理版本应先保留其已有结构并查对应文档不能把不同版本的装饰器随意混用。二、从外向内读组件树本例只有一个外层Column和三个Text。先读这种浅结构比一开始加入多层布局更容易定位问题。Index └─ Column ├─ Text标题 ├─ Text说明 └─ Text当前练习这是结构阅读图不是设备上的布局坐标。容器负责组织子组件文字组件负责表达内容。布局不符合预期时我会先回到最外层再逐层检查。组件只有少量内容时先保持在同一文件即可重复使用或职责独立以后再提取自定义组件。三、用三段静态文字构成最小示例我先明确页面上要显示什么再为文字添加少量属性。EntryComponentstruct Index{build(){Column({space:12}){Text(IT工单学习项目).fontSize(24).fontWeight(FontWeight.Bold)Text(从一个可运行的小页面开始).fontSize(16)Text(当前练习认识 ArkUI 声明式结构).fontSize(14)}.width(100%).height(100%).padding(24).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start)}}这是一份待本机确认的示例文案中的“可运行”是练习目标不是实测结论。若模板的组件名、导入或入口配置不同先保留模板不整段覆盖入口文件。本篇没有事件回调也没有声明响应式状态标题、说明和当前练习文字均为静态字符串。四、分别看间距、内边距与对齐我会把容器属性拆开阅读避免只凭链式调用顺序猜测最终位置。本例属性阅读方向space: 12Column子项间距padding(24)容器内边距width/height(100%)相对父约束设置尺寸justifyContent(FlexAlign.Center)主轴对齐alignItems(HorizontalAlign.Start)交叉轴对齐Column以纵向组织子项本例主轴居中、交叉轴起始。Start应按布局方向理解不能未经确认总写成“屏幕最左侧”。华为Column 接口文档说明了容器间距和对齐属性。实际占用区域还受到父容器、窗口与文字尺寸影响不能从100%就推断所有设备上完全相同的画面。间距、内边距和对齐分别影响不同关系排查时一次只改一项。五、静态修改后确认完整运行路径改变代码中的文字后我会分别确认保存、构建、安装与启动避免把旧应用画面误认为新修改无效。记录当前入口页面的实际路径和组件名。先只修改标题保存文件。按当前工程构建并记录结果。安装到目标设备确认启动的是该工程。对照设备画面确认出现新的标题。IDE 预览可以帮助观察结构但不等于完整应用已经安装并运行。本篇没有替读者执行这条路径实际结果需要据实补入。六、布局不对时先查外层容器当文字位置或留白不符合预期我不会同时删除多条属性而是按外层到内层排查。排查层次观察项外层容器宽高、父约束与主轴/交叉轴对齐内容区域内边距、子项间距子组件文字内容、字号、换行等属性先改变一个属性保存前后代码和实际画面再决定是否保留。链式属性涉及布局与绘制语义遇到顺序差异时应查当前接口说明用最小示例观察不能把它们当成无顺序的样式集合。页面未显示则先检查入口加载路径、构建输出和设备日志。布局排查的前提是实际运行到了目标页面。七、在不同窗口里观察换行与留白如果设备或模拟器支持调整窗口我会在不同可用宽度下观察文本和内容区域。观察项本机实际记录标题是否换行待填写三段文字是否全部可见待填写内边距与留白表现待填写设备、系统与窗口尺寸待填写不要把某次窗口下的效果推广到所有设备也不要从示意图反推像素坐标。字体、窗口、方向和父约束都需要结合实际环境说明。八、静态页面与状态更新分开学习本篇先把结构与静态文字读清楚下一步再加入事件和状态。静态字符串修改后需要通过当前工具链认可的构建和运行流程观察变化。运行时交互的数据则要接入对应状态机制框架才能按其观察规则更新 UI。普通变量赋值不会自动保证界面刷新组件结构与状态观察是不同知识点。完成本机操作后我会保存实际入口路径、构建结果和页面截图。仅有代码与信息图不能写成“已在设备验证”。学习总结这篇我从入口组件开始读外层容器和三个文字组件再把间距、内边距与对齐分开观察。页面越小修改与结果越容易对应。发布前补齐实际环境和运行证据。下一篇加入Text、Button与TextInput开始练习输入和事件反馈。参考资料华为开发者文档ArkTS 声明式开发的基本组成华为开发者文档Column 容器华为开发者联盟ArkTS 语言概览声明本文为学习示例与练习方法配图为结构示意语法、布局、构建和运行结果以当前模板、SDK、实际设备与官方文档为准。返回顶部
个人主页杨利杰YJlio❄️个人专栏《Windows 疑难杂症与工单复盘案例库》 《Sysinternals实战教程》《WINDOWS教程》 《Windows PowerShell 实战》 《IOS插件分析测试》《超简单用Python让Excel飞起来》让复杂的事情更简单让重复的工作自动化文章目录前言先搭一个静态页面一、先读模板中的入口与组件声明二、从外向内读组件树三、用三段静态文字构成最小示例四、分别看间距、内边距与对齐五、静态修改后确认完整运行路径六、布局不对时先查外层容器七、在不同窗口里观察换行与留白八、静态页面与状态更新分开学习学习总结参考资料前言先搭一个静态页面大家好我是杨利杰 YJlio。前几篇准备了数据与显示分支。这篇开始阅读 ArkUI 页面结构先确认入口再看外层容器最后读里面的文字和属性。这是 HarmonyOS 7.0 学习笔记第 09 篇。我先用三段静态文字练习声明式结构暂不加入按钮、输入和动态状态让页面变化更容易观察。组件文件存在不代表它已经被当前工程加载为首屏。环境项实际记录DevEco Studio待填写SDK/API待填写实际入口页面路径待填写运行设备与系统待填写窗口尺寸待填写本文代码为简化学习示例图片为结构与观察方法示意未进行本机编译和设备运行不以配图代替真实页面截图。一、先读模板中的入口与组件声明我会先打开当前模板已使用的页面查看组件名、入口标记和build()再判断哪里需要修改。华为ArkTS 声明式组成说明介绍了入口组件、自定义组件、UI 描述与属性方法。这里采用常见的Entry、Component结构作为学习示例。位置本篇阅读重点Entry页面入口标记Component自定义组件声明struct Index本例组件名build()UI 结构描述模板若采用不同组件声明或状态管理版本应先保留其已有结构并查对应文档不能把不同版本的装饰器随意混用。二、从外向内读组件树本例只有一个外层Column和三个Text。先读这种浅结构比一开始加入多层布局更容易定位问题。Index └─ Column ├─ Text标题 ├─ Text说明 └─ Text当前练习这是结构阅读图不是设备上的布局坐标。容器负责组织子组件文字组件负责表达内容。布局不符合预期时我会先回到最外层再逐层检查。组件只有少量内容时先保持在同一文件即可重复使用或职责独立以后再提取自定义组件。三、用三段静态文字构成最小示例我先明确页面上要显示什么再为文字添加少量属性。EntryComponentstruct Index{build(){Column({space:12}){Text(IT工单学习项目).fontSize(24).fontWeight(FontWeight.Bold)Text(从一个可运行的小页面开始).fontSize(16)Text(当前练习认识 ArkUI 声明式结构).fontSize(14)}.width(100%).height(100%).padding(24).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start)}}这是一份待本机确认的示例文案中的“可运行”是练习目标不是实测结论。若模板的组件名、导入或入口配置不同先保留模板不整段覆盖入口文件。本篇没有事件回调也没有声明响应式状态标题、说明和当前练习文字均为静态字符串。四、分别看间距、内边距与对齐我会把容器属性拆开阅读避免只凭链式调用顺序猜测最终位置。本例属性阅读方向space: 12Column子项间距padding(24)容器内边距width/height(100%)相对父约束设置尺寸justifyContent(FlexAlign.Center)主轴对齐alignItems(HorizontalAlign.Start)交叉轴对齐Column以纵向组织子项本例主轴居中、交叉轴起始。Start应按布局方向理解不能未经确认总写成“屏幕最左侧”。华为Column 接口文档说明了容器间距和对齐属性。实际占用区域还受到父容器、窗口与文字尺寸影响不能从100%就推断所有设备上完全相同的画面。间距、内边距和对齐分别影响不同关系排查时一次只改一项。五、静态修改后确认完整运行路径改变代码中的文字后我会分别确认保存、构建、安装与启动避免把旧应用画面误认为新修改无效。记录当前入口页面的实际路径和组件名。先只修改标题保存文件。按当前工程构建并记录结果。安装到目标设备确认启动的是该工程。对照设备画面确认出现新的标题。IDE 预览可以帮助观察结构但不等于完整应用已经安装并运行。本篇没有替读者执行这条路径实际结果需要据实补入。六、布局不对时先查外层容器当文字位置或留白不符合预期我不会同时删除多条属性而是按外层到内层排查。排查层次观察项外层容器宽高、父约束与主轴/交叉轴对齐内容区域内边距、子项间距子组件文字内容、字号、换行等属性先改变一个属性保存前后代码和实际画面再决定是否保留。链式属性涉及布局与绘制语义遇到顺序差异时应查当前接口说明用最小示例观察不能把它们当成无顺序的样式集合。页面未显示则先检查入口加载路径、构建输出和设备日志。布局排查的前提是实际运行到了目标页面。七、在不同窗口里观察换行与留白如果设备或模拟器支持调整窗口我会在不同可用宽度下观察文本和内容区域。观察项本机实际记录标题是否换行待填写三段文字是否全部可见待填写内边距与留白表现待填写设备、系统与窗口尺寸待填写不要把某次窗口下的效果推广到所有设备也不要从示意图反推像素坐标。字体、窗口、方向和父约束都需要结合实际环境说明。八、静态页面与状态更新分开学习本篇先把结构与静态文字读清楚下一步再加入事件和状态。静态字符串修改后需要通过当前工具链认可的构建和运行流程观察变化。运行时交互的数据则要接入对应状态机制框架才能按其观察规则更新 UI。普通变量赋值不会自动保证界面刷新组件结构与状态观察是不同知识点。完成本机操作后我会保存实际入口路径、构建结果和页面截图。仅有代码与信息图不能写成“已在设备验证”。学习总结这篇我从入口组件开始读外层容器和三个文字组件再把间距、内边距与对齐分开观察。页面越小修改与结果越容易对应。发布前补齐实际环境和运行证据。下一篇加入Text、Button与TextInput开始练习输入和事件反馈。参考资料华为开发者文档ArkTS 声明式开发的基本组成华为开发者文档Column 容器华为开发者联盟ArkTS 语言概览声明本文为学习示例与练习方法配图为结构示意语法、布局、构建和运行结果以当前模板、SDK、实际设备与官方文档为准。返回顶部
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
