一、应用概述便签本Sticky Notes是一个彩色便利贴应用用户输入文字后选择颜色以 2 列网格布局展示所有便签。每张便签显示内容和删除按钮。应用的核心价值在于将传统物理便利贴的体验数字化提供 8 种预设颜色实现快速记录和视觉化浏览。这个应用虽小却是理解 HarmonyOSFlex 换行布局和Grid 网格布局两个核心布局组件的绝佳范例。上半部分的颜色选择器使用Flex实现自动换行下半部分的便签展示使用Grid实现规整的网格排列——两种布局方式在同一页面中相辅相成展示了 ArkUI 布局系统的灵活性和强大能力。二、技术架构2.1 应用结构┌─────────────────────────────────────┐ │ ‹ 返回 便签本 │ ├─────────────────────────────────────┤ │ [输入框...写一张便签...] │ │ ● ● ● ● ○ ○ ○ ○ [➕ 添加] │ ← Flex 换行色彩选择 ├─────────────────────────────────────┤ │ ┌──────┐ ┌──────┐ │ │ │ 便签1 │ │ 便签2 │ │ ← Grid 2列网格 │ │ ✕ │ │ ✕ │ │ │ └──────┘ └──────┘ │ │ ┌──────┐ ┌──────┐ │ │ │ 便签3 │ │ 便签4 │ │ │ │ ✕ │ │ ✕ │ │ │ └──────┘ └──────┘ │ └─────────────────────────────────────┘2.2 数据模型interface Note { id: number; // 唯一标识 text: string; // 便签文字内容 color: string; // 便签颜色十六进制 } const COLORS: string[] [ #FFEB3B, // 黄色 #FFCDD2, // 粉红 #C8E6C9, // 浅绿 #BBDEFB, // 浅蓝 #E1BEE7, // 浅紫 #FFE0B2, // 橙色 #B2EBF2, // 青色 #F0F4C3, // 黄绿 ];2.3 状态变量变量类型用途notesNote[]便签数组驱动 Grid 渲染inputTextstring输入框文本currentColorstring当前选中的颜色nextIdnumber自增 ID 生成器三、核心代码深度解析3.1 Flex 换行颜色选择器颜色选择器是便签本的亮点交互之一使用Flex的wrap: FlexWrap.Wrap实现自动换行排列Row() { Flex({ wrap: FlexWrap.Wrap }) { ForEach(COLORS, (c: string) { Circle().width(28).height(28).fill(c) .margin(3) .stroke(this.currentColor c ? #333 : transparent).strokeWidth(2) .onClick(() { this.currentColor c }) }) }.layoutWeight(1) Button() { Text(➕ 添加).fontSize(14).fontColor(#fff) }.height(40).borderRadius(20).backgroundColor(#0077FF).padding({ left: 16, right: 16 }) .onClick(() this.addNote()) }.margin({ top: 6 })Flex 换行布局详解Flex({ wrap: FlexWrap.Wrap }) { // 子组件会自动换行 }FlexWrap.Wrap允许子组件在空间不足时换到下一行FlexWrap.NoWrap默认值所有子组件在一行内可能溢出对比Row的差异Row不会自动换行子组件过多时会缩小或溢出FlexWrap则自动换行选中状态指示选中的颜色圆stroke(#333)加 2px 黑色边框未选中的颜色圆stroke(transparent)边框透明视觉效果选中项有一个清晰的轮廓与其他颜色区分开为什么用 Circle 而非 ButtonCircle是纯图形组件比Button更轻量没有 Button 默认的点击涟漪效果渲染开销更小颜色填充更精确3.2 Grid 网格展示便签Grid() { ForEach(this.notes, (note: Note) { GridItem() { Column() { Row() { Text(note.text).fontSize(14).lineHeight(20).layoutWeight(1) Text(✕).fontSize(14).fontColor(#999) .onClick(() this.deleteNote(note.id)) } } .padding(12).width(100%).height(100) .backgroundColor(note.color) .borderRadius(8).alignItems(HorizontalAlign.Start) } }, (note: Note) note.id.toString()) } .columnsTemplate(1fr 1fr) .rowsTemplate(repeat(auto-fill, 100px)) .width(96%).rowsGap(8).columnsGap(8) .layoutWeight(1)Grid 的核心属性属性值说明columnsTemplate1fr 1fr2 列等宽网格每列占 1 份剩余空间rowsTemplaterepeat(auto-fill, 100px)自动填充行每行高度 100pxrowsGap8行间距 8vpcolumnsGap8列间距 8vp1fr 单位fr是 ArkUI 网格布局中的弹性系数类似于 CSS 的fr单位。1fr 1fr表示两列各占 50% 宽度。如果有三列设为1fr 2fr 1fr则三列宽度比为 1:2:1。repeat(auto-fill, 100px)这是一个智能行模板声明auto-fill根据容器高度自动计算可以容纳的行数100px每行的基准高度结合layoutWeight(1)Grid 充满父容器剩余空间行数动态计算3.3 添加和删除操作添加便签addNote(): void { const t this.inputText.trim(); if (t ) return; const newNotes: Note[] this.notes.concat(); newNotes.unshift({ id: this.nextId, text: t, color: this.currentColor }); this.notes newNotes; this.inputText ; }删除便签deleteNote(id: number): void { const newNotes: Note[] []; for (let i 0; i this.notes.length; i) { if (this.notes[i].id ! id) { newNotes.push(this.notes[i]); } } this.notes newNotes; }设计模式对比deleteNote使用了手动遍历构建新数组的方式而非filter方式代码简洁性性能可读性filter★★★★★★★★★☆函数调用开销★★★★★for循环★★★☆☆★★★★★★★★☆☆两种方式在几十条数据的规模下性能差异可忽略不计选择for循环是出于教学目的展示基础语法。生产环境中更推荐filter。四、HarmonyOS 特色功能深度解析4.1 Flex 换行布局Flex组件是 ArkUI 中实现灵活布局的核心组件比Row/Column更加强大Flex({ wrap: FlexWrap.Wrap, // 换行模式 justifyContent: FlexAlign.Start, // 主轴对齐 alignItems: ItemAlign.Center // 交叉轴对齐 })FlexWrap 枚举值值行为FlexWrap.NoWrap不换行子项可能溢出FlexWrap.Wrap换行第一行在上方FlexWrap.WrapReverse换行第一行在下方在本应用中Flex({ wrap: FlexWrap.Wrap })确保 8 个颜色圆在屏幕宽度不足时优雅换行适配不同屏幕尺寸。4.2 Grid 网格布局Grid是 HarmonyOS 提供的原生网格布局组件与List一样支持虚拟化渲染columnsTemplate 语法语法单元说明示例1fr弹性分配剩余空间1fr 2fr 1frpx固定像素值100px 200px%百分比30% 70%repeat(n, expr)重复 n 次repeat(3, 1fr)auto-fill自动填充repeat(auto-fill, minmax(100px, 1fr))GridItem网格中的每个单元格必须包裹在GridItem组件中这是 Grid 的子组件类型约束。4.3 onSubmit 事件TextInput({ placeholder: 写一张便签..., text: this.inputText }) .onChange((v: string) { this.inputText v }) .onSubmit(() this.addNote())onSubmit事件在键盘点击「回车/确认」时触发提供了比点击按钮更快捷的输入体验。结合onChange实时同步输入值和onSubmit触发保存实现了完整的输入生命周期管理。五、UI/UX 设计分析5.1 色彩系统应用提供 8 种预设颜色覆盖了色相环的主要区域黄色#FFEB3B明亮活力适合重要提醒粉色#FFCDD2温柔可爱适合个人笔记绿色#C8E6C9清新自然适合待办事项蓝色#BBDEFB冷静理性适合学习笔记紫色#E1BEE7创意灵感适合艺术想法橙色#FFE0B2温暖积极适合目标记录青色#B2EBF2清爽干净适合日常记录黄绿#F0F4C3自然柔和适合备忘5.2 网格卡片设计每张便签采用 100px 高度的卡片设计圆角 8px温和不尖锐文字左对齐符合阅读习惯删除按钮在右上角符合用户对「关闭按钮」的心智模型白色背景父容器与彩色便签形成对比突出每张便签的颜色5.3 交互流程输入文字 → 选择颜色默认黄色 → 点击「添加」或按回车 → 便签出现在网格顶部 → 点击 ✕ 删除便签微交互细节添加按钮➕ 添加的文本包含加号 emoji强化「添加」的语义输入框支持回车提交提供键盘快捷操作删除按钮使用浅灰色#999不喧宾夺主六、最佳实践与优化建议6.1 当前代码亮点自增 ID 生成器nextId从 1 开始递增确保每个便签有唯一 ID空文本保护if (t ) return;防止创建空便签concat unshift 模式先复制数组再在头部插入保持不可变性颜色选择器的视觉反馈选中颜色有黑色边框交互反馈清晰6.2 可优化方向// 优化建议 1添加本地持久化 import { preferences } from kit.ArkData; async saveNotes(): Promisevoid { const data JSON.stringify(this.notes); const prefs await preferences.getPreferences(this.context, notesPref); await prefs.put(notes, data); await prefs.flush(); } // 优化建议 2支持编辑便签 // 点击便签进入编辑模式 onClickNote(note: Note): void { this.editingNote note; this.inputText note.text; this.currentColor note.color; this.isEditing true; } // 优化建议 3拖拽排序 // 使用 PanGesture 实现便签拖拽重新排列 import { PanGesture } from kit.ArkUI; // 优化建议 4搜索功能 get filteredNotes(): Note[] { if (!this.searchText) return this.notes; return this.notes.filter(n n.text.includes(this.searchText)); } // 优化建议 5便签数量统计 get noteCount(): number { return this.notes.length; }6.3 性能优化Grid 虚拟化HarmonyOS 的 Grid 组件自带虚拟化支持当便签数量超出一屏时只渲染可见区域的 GridItem滚动时复用。开发者无需额外处理。合理设置 columnsTemplate1fr 1fr对大多数手机屏幕是合理的。如果支持平板可以考虑repeat(auto-fill, minmax(150px, 1fr))自适应列数。避免频繁状态更新每次addNote和deleteNote都创建新数组在大数据量1000时建议使用LazyForEach替代ForEach。七、总结与扩展便签本应用展示了 ArkUI 中两个核心布局组件Flex和Grid的典型用法知识点应用位置掌握要点Flex Wrap颜色选择器自动换行、自适应布局Grid columnsTemplate便签网格fr 单位、repeat 语法Circle 图形组件颜色圆点轻量级图形渲染onSubmit 事件输入框快捷提交键盘交互优化不可变数组更新添加/删除逻辑State 响应原理扩展思路多列自适应根据屏幕宽度动态调整 Grid 列数平板横屏时显示 3-4 列颜色自定义增加颜色拾取器ColorPicker让用户自定义便签颜色便签分组通过标签或文件夹对便签分类管理提醒功能为便签设置提醒时间使用ohos.backgroundTaskManager实现后台提醒导出分享将便签列表导出为文本或图片分享给好友桌面卡片将便签本制作为服务卡片Form在桌面直接查看和添加便签便签本应用虽小却完美展示了 ArkUI 布局系统的精髓——Flex的灵活换行和Grid的规整网格。掌握这两种布局就能应对绝大多数 ArkTS 界面布局需求。
# 43号应用：便签本 — Flex 换行布局与 Grid 网格展示的完美融合
发布时间：2026/7/31 2:14:00
一、应用概述便签本Sticky Notes是一个彩色便利贴应用用户输入文字后选择颜色以 2 列网格布局展示所有便签。每张便签显示内容和删除按钮。应用的核心价值在于将传统物理便利贴的体验数字化提供 8 种预设颜色实现快速记录和视觉化浏览。这个应用虽小却是理解 HarmonyOSFlex 换行布局和Grid 网格布局两个核心布局组件的绝佳范例。上半部分的颜色选择器使用Flex实现自动换行下半部分的便签展示使用Grid实现规整的网格排列——两种布局方式在同一页面中相辅相成展示了 ArkUI 布局系统的灵活性和强大能力。二、技术架构2.1 应用结构┌─────────────────────────────────────┐ │ ‹ 返回 便签本 │ ├─────────────────────────────────────┤ │ [输入框...写一张便签...] │ │ ● ● ● ● ○ ○ ○ ○ [➕ 添加] │ ← Flex 换行色彩选择 ├─────────────────────────────────────┤ │ ┌──────┐ ┌──────┐ │ │ │ 便签1 │ │ 便签2 │ │ ← Grid 2列网格 │ │ ✕ │ │ ✕ │ │ │ └──────┘ └──────┘ │ │ ┌──────┐ ┌──────┐ │ │ │ 便签3 │ │ 便签4 │ │ │ │ ✕ │ │ ✕ │ │ │ └──────┘ └──────┘ │ └─────────────────────────────────────┘2.2 数据模型interface Note { id: number; // 唯一标识 text: string; // 便签文字内容 color: string; // 便签颜色十六进制 } const COLORS: string[] [ #FFEB3B, // 黄色 #FFCDD2, // 粉红 #C8E6C9, // 浅绿 #BBDEFB, // 浅蓝 #E1BEE7, // 浅紫 #FFE0B2, // 橙色 #B2EBF2, // 青色 #F0F4C3, // 黄绿 ];2.3 状态变量变量类型用途notesNote[]便签数组驱动 Grid 渲染inputTextstring输入框文本currentColorstring当前选中的颜色nextIdnumber自增 ID 生成器三、核心代码深度解析3.1 Flex 换行颜色选择器颜色选择器是便签本的亮点交互之一使用Flex的wrap: FlexWrap.Wrap实现自动换行排列Row() { Flex({ wrap: FlexWrap.Wrap }) { ForEach(COLORS, (c: string) { Circle().width(28).height(28).fill(c) .margin(3) .stroke(this.currentColor c ? #333 : transparent).strokeWidth(2) .onClick(() { this.currentColor c }) }) }.layoutWeight(1) Button() { Text(➕ 添加).fontSize(14).fontColor(#fff) }.height(40).borderRadius(20).backgroundColor(#0077FF).padding({ left: 16, right: 16 }) .onClick(() this.addNote()) }.margin({ top: 6 })Flex 换行布局详解Flex({ wrap: FlexWrap.Wrap }) { // 子组件会自动换行 }FlexWrap.Wrap允许子组件在空间不足时换到下一行FlexWrap.NoWrap默认值所有子组件在一行内可能溢出对比Row的差异Row不会自动换行子组件过多时会缩小或溢出FlexWrap则自动换行选中状态指示选中的颜色圆stroke(#333)加 2px 黑色边框未选中的颜色圆stroke(transparent)边框透明视觉效果选中项有一个清晰的轮廓与其他颜色区分开为什么用 Circle 而非 ButtonCircle是纯图形组件比Button更轻量没有 Button 默认的点击涟漪效果渲染开销更小颜色填充更精确3.2 Grid 网格展示便签Grid() { ForEach(this.notes, (note: Note) { GridItem() { Column() { Row() { Text(note.text).fontSize(14).lineHeight(20).layoutWeight(1) Text(✕).fontSize(14).fontColor(#999) .onClick(() this.deleteNote(note.id)) } } .padding(12).width(100%).height(100) .backgroundColor(note.color) .borderRadius(8).alignItems(HorizontalAlign.Start) } }, (note: Note) note.id.toString()) } .columnsTemplate(1fr 1fr) .rowsTemplate(repeat(auto-fill, 100px)) .width(96%).rowsGap(8).columnsGap(8) .layoutWeight(1)Grid 的核心属性属性值说明columnsTemplate1fr 1fr2 列等宽网格每列占 1 份剩余空间rowsTemplaterepeat(auto-fill, 100px)自动填充行每行高度 100pxrowsGap8行间距 8vpcolumnsGap8列间距 8vp1fr 单位fr是 ArkUI 网格布局中的弹性系数类似于 CSS 的fr单位。1fr 1fr表示两列各占 50% 宽度。如果有三列设为1fr 2fr 1fr则三列宽度比为 1:2:1。repeat(auto-fill, 100px)这是一个智能行模板声明auto-fill根据容器高度自动计算可以容纳的行数100px每行的基准高度结合layoutWeight(1)Grid 充满父容器剩余空间行数动态计算3.3 添加和删除操作添加便签addNote(): void { const t this.inputText.trim(); if (t ) return; const newNotes: Note[] this.notes.concat(); newNotes.unshift({ id: this.nextId, text: t, color: this.currentColor }); this.notes newNotes; this.inputText ; }删除便签deleteNote(id: number): void { const newNotes: Note[] []; for (let i 0; i this.notes.length; i) { if (this.notes[i].id ! id) { newNotes.push(this.notes[i]); } } this.notes newNotes; }设计模式对比deleteNote使用了手动遍历构建新数组的方式而非filter方式代码简洁性性能可读性filter★★★★★★★★★☆函数调用开销★★★★★for循环★★★☆☆★★★★★★★★☆☆两种方式在几十条数据的规模下性能差异可忽略不计选择for循环是出于教学目的展示基础语法。生产环境中更推荐filter。四、HarmonyOS 特色功能深度解析4.1 Flex 换行布局Flex组件是 ArkUI 中实现灵活布局的核心组件比Row/Column更加强大Flex({ wrap: FlexWrap.Wrap, // 换行模式 justifyContent: FlexAlign.Start, // 主轴对齐 alignItems: ItemAlign.Center // 交叉轴对齐 })FlexWrap 枚举值值行为FlexWrap.NoWrap不换行子项可能溢出FlexWrap.Wrap换行第一行在上方FlexWrap.WrapReverse换行第一行在下方在本应用中Flex({ wrap: FlexWrap.Wrap })确保 8 个颜色圆在屏幕宽度不足时优雅换行适配不同屏幕尺寸。4.2 Grid 网格布局Grid是 HarmonyOS 提供的原生网格布局组件与List一样支持虚拟化渲染columnsTemplate 语法语法单元说明示例1fr弹性分配剩余空间1fr 2fr 1frpx固定像素值100px 200px%百分比30% 70%repeat(n, expr)重复 n 次repeat(3, 1fr)auto-fill自动填充repeat(auto-fill, minmax(100px, 1fr))GridItem网格中的每个单元格必须包裹在GridItem组件中这是 Grid 的子组件类型约束。4.3 onSubmit 事件TextInput({ placeholder: 写一张便签..., text: this.inputText }) .onChange((v: string) { this.inputText v }) .onSubmit(() this.addNote())onSubmit事件在键盘点击「回车/确认」时触发提供了比点击按钮更快捷的输入体验。结合onChange实时同步输入值和onSubmit触发保存实现了完整的输入生命周期管理。五、UI/UX 设计分析5.1 色彩系统应用提供 8 种预设颜色覆盖了色相环的主要区域黄色#FFEB3B明亮活力适合重要提醒粉色#FFCDD2温柔可爱适合个人笔记绿色#C8E6C9清新自然适合待办事项蓝色#BBDEFB冷静理性适合学习笔记紫色#E1BEE7创意灵感适合艺术想法橙色#FFE0B2温暖积极适合目标记录青色#B2EBF2清爽干净适合日常记录黄绿#F0F4C3自然柔和适合备忘5.2 网格卡片设计每张便签采用 100px 高度的卡片设计圆角 8px温和不尖锐文字左对齐符合阅读习惯删除按钮在右上角符合用户对「关闭按钮」的心智模型白色背景父容器与彩色便签形成对比突出每张便签的颜色5.3 交互流程输入文字 → 选择颜色默认黄色 → 点击「添加」或按回车 → 便签出现在网格顶部 → 点击 ✕ 删除便签微交互细节添加按钮➕ 添加的文本包含加号 emoji强化「添加」的语义输入框支持回车提交提供键盘快捷操作删除按钮使用浅灰色#999不喧宾夺主六、最佳实践与优化建议6.1 当前代码亮点自增 ID 生成器nextId从 1 开始递增确保每个便签有唯一 ID空文本保护if (t ) return;防止创建空便签concat unshift 模式先复制数组再在头部插入保持不可变性颜色选择器的视觉反馈选中颜色有黑色边框交互反馈清晰6.2 可优化方向// 优化建议 1添加本地持久化 import { preferences } from kit.ArkData; async saveNotes(): Promisevoid { const data JSON.stringify(this.notes); const prefs await preferences.getPreferences(this.context, notesPref); await prefs.put(notes, data); await prefs.flush(); } // 优化建议 2支持编辑便签 // 点击便签进入编辑模式 onClickNote(note: Note): void { this.editingNote note; this.inputText note.text; this.currentColor note.color; this.isEditing true; } // 优化建议 3拖拽排序 // 使用 PanGesture 实现便签拖拽重新排列 import { PanGesture } from kit.ArkUI; // 优化建议 4搜索功能 get filteredNotes(): Note[] { if (!this.searchText) return this.notes; return this.notes.filter(n n.text.includes(this.searchText)); } // 优化建议 5便签数量统计 get noteCount(): number { return this.notes.length; }6.3 性能优化Grid 虚拟化HarmonyOS 的 Grid 组件自带虚拟化支持当便签数量超出一屏时只渲染可见区域的 GridItem滚动时复用。开发者无需额外处理。合理设置 columnsTemplate1fr 1fr对大多数手机屏幕是合理的。如果支持平板可以考虑repeat(auto-fill, minmax(150px, 1fr))自适应列数。避免频繁状态更新每次addNote和deleteNote都创建新数组在大数据量1000时建议使用LazyForEach替代ForEach。七、总结与扩展便签本应用展示了 ArkUI 中两个核心布局组件Flex和Grid的典型用法知识点应用位置掌握要点Flex Wrap颜色选择器自动换行、自适应布局Grid columnsTemplate便签网格fr 单位、repeat 语法Circle 图形组件颜色圆点轻量级图形渲染onSubmit 事件输入框快捷提交键盘交互优化不可变数组更新添加/删除逻辑State 响应原理扩展思路多列自适应根据屏幕宽度动态调整 Grid 列数平板横屏时显示 3-4 列颜色自定义增加颜色拾取器ColorPicker让用户自定义便签颜色便签分组通过标签或文件夹对便签分类管理提醒功能为便签设置提醒时间使用ohos.backgroundTaskManager实现后台提醒导出分享将便签列表导出为文本或图片分享给好友桌面卡片将便签本制作为服务卡片Form在桌面直接查看和添加便签便签本应用虽小却完美展示了 ArkUI 布局系统的精髓——Flex的灵活换行和Grid的规整网格。掌握这两种布局就能应对绝大多数 ArkTS 界面布局需求。
