鸿蒙HarmonyOS ArkTS UI分层设计在PC端的应用

原创 于 2026-06-15 11:27:10 发布 · 279 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #ui #华为 #学习 #鸿蒙

仓库地址：https://atomgit.com/feng8403000/hongmeng61fencengsheji
在这里插入图片描述
示例效果：
在这里插入图片描述

引言

在现代UI开发中，代码的可维护性和复用性是至关重要的。HarmonyOS 6.1提供了强大的ArkUI框架，支持声明式UI开发。本文将介绍如何使用分层设计模式构建高质量的HarmonyOS应用。

什么是分层设计

分层设计（Atomic Design）是一种UI组件架构方法论，将UI拆分为不同层次的组件：

层级名称说明示例
原子层Atoms最基础的UI元素按钮、文本、图标
分子层Molecules原子组件的组合搜索框、卡片
组织层Organisms分子组件的组合头部、列表、表单
模板层Templates页面布局框架主页面、详情页

分层架构优势

┌─────────────────────────────────────────────────────────────┐
│                    模板层 (Templates)                      │
│              MainTemplate - 页面布局框架                    │
├─────────────────────────────────────────────────────────────┤
│                    组织层 (Organisms)                      │
│      HeaderOrganism       FeatureSectionOrganism           │
│      ┌──────────┐          ┌─────────────────┐            │
│      │分子层组件│          │   分子层组件    │            │
│      └──────────┘          └─────────────────┘            │
├─────────────────────────────────────────────────────────────┤
│                    分子层 (Molecules)                       │
│      SearchBoxMolecule     CardMolecule                    │
│      ┌──────────┐          ┌─────────────────┐            │
│      │原子层组件│          │   原子层组件    │            │
│      └──────────┘          └─────────────────┘            │
├─────────────────────────────────────────────────────────────┤
│                    原子层 (Atoms)                          │
│        ButtonAtom       TextAtom                          │
│        ┌────────┐      ┌────────┐                         │
│        │ArkUI原生│      │ArkUI原生│                        │
│        │ 组件   │      │ 组件   │                        │
│        └────────┘      └────────┘                         │
└─────────────────────────────────────────────────────────────┘

设计优势

特性说明
高复用性原子组件可在多个页面复用
易维护性组件职责单一，易于测试和修改
可扩展性新增功能只需添加新组件
一致性统一的设计语言和组件规范
团队协作多人协作时减少代码冲突

一、原子层组件设计

原子层是UI的最小构建块，包含最基础的UI元素。

1.1 ButtonAtom - 按钮组件

@Component
export struct ButtonAtom {
  label: string = '';
  btnType: 'primary' | 'secondary' | 'danger' = 'primary';
  btnSize: 'small' | 'medium' | 'large' = 'medium';
  onTap: () => void = () => {};

  build() {
    Button(this.label)
      .width(this.getWidth())
      .height(this.getHeight())
      .backgroundColor(this.getBgColor())
      .fontColor('#ffffff')
      .fontSize(this.getFontSize())
      .fontWeight(FontWeight.Bold)
      .borderRadius(this.getRadius())
      .border({ width: this.getBorderWidth(), color: this.getBorderColor() })
      .onClick(this.onTap);
  }

  getWidth(): number {
    if (this.btnSize === 'small') return 80;
    if (this.btnSize === 'large') return 160;
    return 120;
  }

  getBgColor(): string {
    if (this.btnType === 'secondary') return 'rgba(255,255,255,0.1)';
    if (this.btnType === 'danger') return '#ef4444';
    return '#22c55e';
  }
  // ... 其他方法省略
}

设计要点：

  • 支持三种类型：primary（主要）、secondary（次要）、danger（危险）
  • 支持三种尺寸：small、medium、large
  • 通过独立方法管理样式，便于维护和扩展

1.2 TextAtom - 文本组件

@Component
export struct TextAtom {
  content: string = '';
  textType: 'heading' | 'subheading' | 'body' | 'caption' = 'body';
  textColor: string = '#ffffff';
  textAlignment: TextAlign = TextAlign.Start;

  build() {
    Text(this.content)
      .fontSize(this.getFontSize())
      .fontWeight(this.getFontWeight())
      .fontColor(this.textColor)
      .textAlign(this.textAlignment);
  }

  getFontSize(): number {
    if (this.textType === 'heading') return 32;
    if (this.textType === 'subheading') return 20;
    if (this.textType === 'caption') return 12;
    return 14;
  }

  getFontWeight(): number {
    if (this.textType === 'heading') return FontWeight.Bold;
    if (this.textType === 'subheading') return FontWeight.Medium;
    return FontWeight.Normal;
  }
}

设计要点：

  • 支持四种文本样式：heading、subheading、body、caption
  • 统一管理字体大小和字重
  • 支持自定义颜色和对齐方式

二、分子层组件设计

分子层由多个原子组件组合而成，形成具有特定功能的组件。

2.1 SearchBoxMolecule - 搜索框组件

import { ButtonAtom } from '../atoms/ButtonAtom';

@Component
export struct SearchBoxMolecule {
  @State inputValue: string = '';
  onSearch: (keyword: string) => void = () => {};

  build() {
    Row({ space: 10 }) {
      TextInput({ placeholder: '请输入搜索关键词...', text: this.inputValue })
        .width('75%')
        .height(48)
        .backgroundColor('rgba(255,255,255,0.08)')
        .fontColor('#ffffff')
        .placeholderColor('rgba(255,255,255,0.4)')
        .borderRadius(12)
        .padding({ left: 20, right: 20 })
        .onChange((value: string) => {
          this.inputValue = value;
        });

      ButtonAtom({
        label: '搜索',
        btnType: 'primary',
        btnSize: 'medium',
        onTap: () => {
          this.onSearch(this.inputValue);
        }
      });
    }
    .width('100%')
    .height(60);
  }
}

设计要点：

  • 组合 TextInput 和 ButtonAtom
  • 内部管理输入状态
  • 通过回调函数向外传递搜索事件

2.2 CardMolecule - 卡片组件

import { TextAtom } from '../atoms/TextAtom';

@Component
export struct CardMolecule {
  title: string = '';
  description: string = '';
  icon: string = '';
  tag: string = '';
  tagColor: string = '#22c55e';

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column({ space: 15 }) {
        Row({ space: 10 }) {
          Text(this.icon).fontSize(32);
          
          if (this.tag) {
            Text(this.tag)
              .fontSize(12)
              .fontColor(this.tagColor)
              .backgroundColor(this.getBgColorWithOpacity())
              .padding({ left: 8, right: 8, top: 2, bottom: 2 })
              .borderRadius(4);
          }
        }
        .width('100%');

        Column({ space: 8 }) {
          TextAtom({ content: this.title, textType: 'subheading' });
          TextAtom({ content: this.description, textType: 'body', textColor: 'rgba(255,255,255,0.6)' });
        }
        .width('100%');
      }
      .width('100%')
      .padding(20);

      Row() {
        Rect()
          .width(40)
          .height(3)
          .fill(this.tagColor);
      }
      .width('100%')
      .padding({ bottom: 20, left: 20 });
    }
    .width('100%')
    .height(180)
    .backgroundColor('rgba(255,255,255,0.05)')
    .borderRadius(16)
    .border({ width: 1, color: 'rgba(255,255,255,0.1)' });
  }
  // ... 其他方法省略
}

设计要点：

  • 组合图标、标签、标题、描述
  • 使用 Stack 实现多层布局
  • 支持自定义标签颜色

三、组织层组件设计

组织层由多个分子组件组合而成，形成页面的独立区域。

3.1 HeaderOrganism - 头部导航组件

import { TextAtom } from '../atoms/TextAtom';
import { ButtonAtom } from '../atoms/ButtonAtom';
import { SearchBoxMolecule } from '../molecules/SearchBoxMolecule';

@Component
export struct HeaderOrganism {
  onSearch: (keyword: string) => void = () => {};

  build() {
    Column({ space: 20 }) {
      Row() {
        Column({ space: 5 }) {
          TextAtom({ content: 'HarmonyOS 6.1', textType: 'caption', textColor: 'rgba(255,255,255,0.5)' });
          TextAtom({ content: '分层设计示例', textType: 'heading' });
        }
        .flexGrow(1);

        Row({ space: 10 }) {
          ButtonAtom({ label: '登录', btnType: 'secondary', btnSize: 'small' });
          ButtonAtom({ label: '注册', btnType: 'primary', btnSize: 'small' });
        }
      }
      .width('100%')
      .height(80);

      SearchBoxMolecule({ onSearch: this.onSearch });
    }
    .width('100%')
    .padding({ left: 30, right: 30, top: 30 });
  }
}

设计要点：

  • 组合品牌标识、操作按钮、搜索框
  • 作为页面顶部的完整区域

3.2 FeatureSectionOrganism - 功能区域组件

import { TextAtom } from '../atoms/TextAtom';
import { CardMolecule } from '../molecules/CardMolecule';

@Component
export struct FeatureSectionOrganism {
  build() {
    Column({ space: 20 }) {
      Column({ space: 5 }) {
        TextAtom({ content: '核心能力', textType: 'caption', textColor: '#22c55e' });
        TextAtom({ content: 'HarmonyOS 6.1 新特性', textType: 'subheading' });
        TextAtom({ 
          content: '探索最新的HarmonyOS功能，体验更强大的智能终端体验', 
          textType: 'body', 
          textColor: 'rgba(255,255,255,0.5)' 
        });
      }
      .width('100%');

      Grid() {
        GridItem() {
          CardMolecule({
            title: '原子化服务',
            description: '无需安装，一键直达。全新的服务形态，让应用触手可及。',
            icon: '⚛️',
            tag: '新特性',
            tagColor: '#22c55e'
          });
        }
        // ... 其他卡片省略
      }
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(20)
      .rowsGap(20)
      .width('100%')
      .height(400);
    }
    .width('100%')
    .padding({ left: 30, right: 30, top: 40 });
  }
}

设计要点：

  • 使用 Grid 布局展示多个卡片
  • 包含标题区域和内容区域

四、模板层设计

模板层是页面的最高层级，组合所有组织层组件形成完整页面。

4.1 MainTemplate - 主页面模板

import { HeaderOrganism } from '../organisms/HeaderOrganism';
import { FeatureSectionOrganism } from '../organisms/FeatureSectionOrganism';
import { TextAtom } from '../atoms/TextAtom';

@Component
export struct MainTemplate {
  @State searchKeyword: string = '';
  @State searchResults: Array<string> = [];

  build() {
    Scroll() {
      Column({ space: 0 }) {
        HeaderOrganism({
          onSearch: (keyword: string) => {
            this.handleSearch(keyword);
          }
        });

        FeatureSectionOrganism();

        if (this.searchResults.length > 0) {
          this.buildSearchResults();
        }

        this.buildFooter();
      }
      .width('100%');
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0f172a');
  }

  @Builder
  buildSearchResults() {
    // 搜索结果展示
  }

  @Builder
  buildFooter() {
    // 页脚
  }

  handleSearch(keyword: string) {
    // 搜索逻辑
  }
}

设计要点：

  • 组合所有组织层组件
  • 管理页面级状态
  • 提供可滚动的页面布局

五、完整项目结构

entry/src/main/ets/
├── components/
│   ├── atoms/           # 原子层
│   │   ├── ButtonAtom.ets
│   │   └── TextAtom.ets
│   ├── molecules/       # 分子层
│   │   ├── SearchBoxMolecule.ets
│   │   └── CardMolecule.ets
│   ├── organisms/       # 组织层
│   │   ├── HeaderOrganism.ets
│   │   └── FeatureSectionOrganism.ets
│   └── templates/       # 模板层
│       └── MainTemplate.ets
└── pages/
    └── Index.ets        # 入口页面

六、分层设计最佳实践

6.1 组件命名规范

层级命名规则示例
原子层名称 + AtomButtonAtom, TextAtom
分子层名称 + MoleculeSearchBoxMolecule, CardMolecule
组织层名称 + OrganismHeaderOrganism, FeatureSectionOrganism
模板层名称 + TemplateMainTemplate, DetailTemplate

6.2 设计原则

  1. 单一职责：每个组件只负责一个功能
  2. 可复用性：组件应设计为可在多个场景使用
  3. 可配置性：通过参数提供灵活的配置选项
  4. 解耦合：组件之间尽量独立，通过参数传递数据

6.3 ArkTS 注意事项

在HarmonyOS ArkTS中使用分层设计时需要注意：

注意事项说明
属性命名避免与基类属性冲突（如 size, onClick, align）
类型安全使用显式接口定义数据结构
状态管理使用 @State 管理组件内部状态
生命周期合理使用组件生命周期方法

七、总结

分层设计是一种强大的UI架构模式，通过将UI拆分为原子、分子、组织和模板四个层次，可以显著提高代码的：

  1. 复用性：原子组件可以在多个页面复用
  2. 可维护性：组件职责单一，易于测试和修改
  3. 可扩展性：新增功能只需添加新组件
  4. 一致性：统一的设计语言和组件规范

相关文件

  • [ButtonAtom.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/atoms/ButtonAtom.ets)
  • [TextAtom.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/atoms/TextAtom.ets)
  • [SearchBoxMolecule.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/molecules/SearchBoxMolecule.ets)
  • [CardMolecule.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/molecules/CardMolecule.ets)
  • [HeaderOrganism.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/organisms/HeaderOrganism.ets)
  • [FeatureSectionOrganism.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/organisms/FeatureSectionOrganism.ets)
  • [MainTemplate.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/components/templates/MainTemplate.ets)
  • [Index.ets](file:///d:/HarmonyOSProject/MyApplication_PC0613/entry/src/main/ets/pages/Index.ets)

参考资料：

鸿蒙实战：ArkTs 开发一个鸿蒙应用
liuhaojiabin的博客
11-29 1307
标签，在有 UIAbility 的场景下标签不能省略，用来声明路由跳转路径，如果想通过路由的方式，实现页面之间的跳转，需要在。点击左图上的按钮，会获取数据, 当数据变化时，会自动刷新 UI，结果如右图所示。为本地窗口管理器，用于管理窗口相关的内容，例如与界面相关的获焦/失焦、可见/不可见。方法写非 UI 逻辑，那么数据变化了，怎么更新 UI 呢，这就需要用到注解。的生命周期，每个生命周期分别做什么事，我会在下篇文章中分析，而右图表示。不可以被其他应用调用，也不作为程序的启动入口，那么。
鸿蒙APP架构及开发入门
三翼鸟数字化平台的技术实践分享
07-26 3518
鸿蒙介绍与开发指南
HarmonyOS PC 多窗口，到底在解决什么
热门推荐
qq_36863796的博客
01-25 1万+
本文探讨了HarmonyOS PC多窗口设计的核心思想。作者指出，PC多窗口不是简单的UI能力，而是要求开发者重构应用状态模型。传统移动端的单窗口状态管理在PC场景下会失效，必须将状态分为窗口级、应用级和文档级。正确的做法是将每个窗口视为文档的一个视图，通过文档模型实现状态隔离和同步。文章强调多窗口设计实际上暴露了开发者长期忽视的状态管理问题，为未来的协作和多实例功能奠定了基础，是PC应用开发的必要进化而非额外负担。
HarmonyOS PC：多端协同应用开发实践与创新
m0_59315734的博客
02-08 583
HarmonyOS PC作为新一代桌面操作系统，不仅继承了传统PC的生产力特性，更通过分布式技术突破了设备边界，为应用开发创造了全新的可能性。对于开发者而言，现在正是进入HarmonyOS PC开发领域的最佳时机。
HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
01-17 6289
2024年1月16日，华为目前开启已HarmonyOS NEXT开发者预览版Beta招募，报名周期为1月15日-1月22日。HarmonyOS NEXT开发者预览版将不再兼容安卓开源应用，仅支持鸿蒙内核和系统的应用，因此被称为“纯血鸿蒙”。
鸿蒙Next番茄钟应用开发实战：从零构建高效专注力工具
m0_67000457的博客
06-10 773
本文详细介绍了在鸿蒙Next系统上使用ArkTS开发番茄钟应用的全过程。文章从番茄工作法的原理讲起，阐述了当前市场同类应用现状和鸿蒙生态需求。在技术实现层面，作者首先进行了需求分析和技术选型，重点比较了ArkTS的优势，然后详细讲解了项目初始化、工程结构设计、UI构建思路和具体实现方案，包括深色渐变背景、状态显示等关键组件的代码实现。整个开发过程遵循HarmonyOS Next最佳实践，采用Stage模型和ArkUI声明式框架，最终打造出一款简洁高效的专注力工具。
鸿蒙PC迁移：fontTools Python 三方库鸿蒙PC适配全记录
knighthood2001
06-15 5462
欢迎加入鸿蒙PC开发者社区，共同打造开发者工具生态：鸿蒙PC开发者社区：https://harmonypc.csdn.net/项目开源地址：https://atomgit.com/OpenHarmonyPCDeveloper/ohos_fontTools欢迎在PC社区平台申请新建项目：https://atomgit.com/OpenHarmonyPCDeveloper这篇文章记录的是一次把 Python 字体处理三方库fontTools接入 HarmonyOS PC / 鸿蒙 PC 应用的完整过程。
鸿蒙PC迁移：使用Electron`logseq-master-ohos` 鸿蒙适配全记录
qq_46906413的博客
06-15 5579
本文介绍了Logseq知识管理工具在OpenHarmony/HarmonyOS Electron环境中的适配过程。通过优先采用Web release方案，开发者成功实现了Logseq在鸿蒙平台的核心功能闭环，包括主界面、日记页、图谱创建、编辑搜索及本地持久化等能力。适配过程中新增了鸿蒙HAP工程壳、构建脚本和运行时识别机制，通过本地HTTP服务加载Web资源，避免了直接迁移桌面版的复杂性。这一方案为后续进一步扩展文件系统、插件等高级功能奠定了基础，验证了Logseq在鸿蒙生态中的可行性。
鸿蒙原生应用开发实战（二）：ArkTS组件化构建首页——钓点列表与底部导航
2601_95150937的博客
06-13 237
本文介绍了鸿蒙原生应用开发中如何使用ArkTS组件化构建"钓点日记"App首页。主要内容包括： ArkTS核心概念：回顾了@Component、@Entry组件定义，@State状态管理，条件渲染和ForEach循环渲染等基础语法。 首页布局设计：通过Column+Row组合实现三层结构（标题栏、可滚动内容区、底部导航），使用layoutWeight实现自适应布局。 数据模型定义：使用interface定义钓点数据结构，通过@State管理状态数据，并注意严格模式下的类型声明规范。 组件化开发实践：详细讲解
鸿蒙原生应用实战（十五）ArkUI 健康计步器：加速度传感器 + 峰值检测 + SQLite 存储 + 周报统计
最新发布
2502_94531999的博客
06-15 151
本文介绍了一个基于鸿蒙ArkUI开发的健康计步器应用实现方案。该应用通过加速度传感器结合峰值检测算法实现精准计步，并采用SQLite数据库存储数据，支持日/周步数统计、卡路里换算和目标设定等功能。 核心要点包括： 计步算法采用三轴矢量合成+带通滤波+峰值检测+防抖机制，关键参数优化（采样频率50Hz、加速度阈值11m/s²、防抖时间200ms） 数据模型设计包含步数、目标、卡路里和距离等字段 使用SQLite进行数据持久化存储，支持日更和周报统计 实现实时计步、卡路里估算（每步0.04千卡）、距离换算（每步
从零开始构建鸿蒙纪念日提醒 App：ArkTS + API 24 实战
m0_67000457的博客
06-10 188
这篇文章摘要如下： 本文详细介绍了基于鸿蒙ArkTS和API 24开发纪念日提醒App的完整过程。主要内容包括：1) 项目需求分析和技术选型，采用轻量级Preferences存储；2) 三层架构设计（数据模型、持久化、UI）；3) 核心数据模型设计，包括日期处理算法和边界条件处理；4) 数据持久化层的实现方案；5) UI层的视觉设计和交互实现。文章特别强调了日期计算、倒计时逻辑、状态标识等关键功能的实现细节，并解释了技术决策背后的考量，为鸿蒙开发者提供了一个完整的应用开发实战案例。
鸿蒙PC迁移_LocalSend 迁移到鸿蒙 PC：一次 Flutter + Rust + 三方库适配的完整记录
qq_46906413的博客
06-15 5617
本文记录了LocalSend跨平台文件传输工具在OpenHarmony/HarmonyOS PC环境中的迁移适配过程。LocalSend基于Flutter前端和Rust核心通信，涉及多平台动态库、网络请求、文件选择等复杂功能。适配过程中解决了rhttp动态库加载、Rust FFI编译、三方插件注册、文件权限等关键问题，最终实现在OHOS设备上构建运行。文章详细介绍了环境搭建、项目结构、技术难点及解决方案，为Flutter OHOS生态开发提供了实践参考。
【鸿蒙原生应用开发实战】第三篇：列表页与标签筛选功能 — 打造高效的天体列表
2601_95150937的博客
06-14 294
摘要 本文详细介绍了"宇宙探索"App中天体列表页(CelestialPage)的实现过程，重点包含标签筛选和天体卡片设计。页面采用顶部5标签（全部/行星/恒星/星系/星云）进行内容筛选，每个天体卡片通过左侧颜色条区分类型，包含名称、描述等核心信息及收藏功能。关键技术点包括：使用Row/Column布局构建卡片组件，通过事件冒泡机制分离卡片点击和收藏按钮交互，优化文本显示（字符截断+行数限制），以及状态管理实现收藏状态的即时更新。卡片点击可跳转详情页，整体设计注重视觉层次和交互体验。
鸿蒙实战（二） ArkUI AI 相机：从零实现实时滤镜与人脸贴纸
2502_94531999的博客
06-13 369
摘要 本文介绍如何从零开发一个AI相机App，实现实时滤镜和人脸贴纸功能。项目基于HarmonyOS的ArkUI框架，使用相机API、图像处理API和Canvas绘制技术。主要功能包括：相机预览、6种实时滤镜（黑白/复古/日系等）、人脸贴纸（猫耳朵/墨镜/兔耳朵等）、拍照保存和前后摄像头切换。文章详细说明了开发环境要求、项目结构、权限配置，并提供了核心代码实现，包括相机初始化、滤镜参数设置、贴纸定位等关键步骤。该项目需要真机测试，适合想要学习HarmonyOS多媒体开发的开发者。
HarmonyOS应用＜节气通＞开发第24篇:响应式布局设计
2301_79280419的博客
06-10 178
本文介绍了在HarmonyOS应用中实现响应式布局的方法，主要包括：1）使用百分比和弹性布局适配不同屏幕尺寸；2）通过mediaQuery实现断点设计，根据屏幕宽度切换布局；3）针对不同设备优化显示效果。关键实现包括：利用Grid组件构建自适应网格布局，通过条件渲染在不同断点下显示不同布局结构，以及动态计算屏幕尺寸调整UI元素。文中提供了完整的代码示例，展示了从小屏幕单列布局到大屏幕多列布局的转换过程，帮助开发者掌握HarmonyOS响应式设计的核心技巧。
鸿蒙原生ArkTS布局之RowStart垂直对齐详解
m0_67000457的博客
06-09 343
本文深入解析了鸿蒙原生ArkTS布局中Row组件的垂直对齐方式，重点探讨了VerticalAlign.Top顶部对齐的应用。主要内容包括： 核心概念：介绍了Row布局的主轴（水平）和交叉轴（垂直）方向，以及alignItems与justifyContent的区别。 对齐方式对比：详细分析了VerticalAlign.Top、Center和Bottom三种垂直对齐方式的视觉效果和应用场景。 关键实现要点： 必须显式设置Row容器高度才能看到对齐效果 顶部对齐(VerticalAlign.Top)是最常用的自然
HarmonyOS AI开发提效工具：DevEco Code & DevEco CLI - 跨设备调试与AI应用部署
漫步云端
06-14 277
这一步是整个流程的基础。很多人直接复制默认配置，结果平板运行时还在用手机布局。},},的值必须与@Entry的deviceType严格对应，否则运行时会出现布局不匹配apiVersion建议统一为 23，如果实际设备版本不同，可以通过中的控制不需要针对每个设备写不同文件，ArkUI 的布局适配通过@Entry和@Preview实现。
鸿蒙PC迁移：KeePassXC Qt 密码管理器鸿蒙PC适配全记录
knighthood2001
06-15 5328
欢迎加入鸿蒙PC开发者社区，共同打造开发者工具生态：鸿蒙PC开发者社区：https://harmonypc.csdn.net/项目开源地址：https://atomgit.com/OpenHarmonyPCDeveloper/ohos_KeePassXC欢迎在PC社区平台申请新建项目：https://atomgit.com/OpenHarmonyPCDeveloper这篇文章记录的是KeePassXC在 HarmonyOS PC / 鸿蒙真机环境中的一次适配过程。
【共创季稿事节】鸿蒙原生 ArkTS 布局精讲：foregroundColor 前景色统一着色
m0_67000457的博客
06-14 313
鸿蒙ArkTS布局：foregroundColor前景色统一着色摘要 本文深入解析HarmonyOS NEXT中的foregroundColor属性，这是一种优雅的UI统一着色解决方案。传统方法需要为每个Text和Image单独设置颜色，而foregroundColor允许通过父容器一次性设置所有子组件的前景色。 关键要点： foregroundColor作用于组件前景内容（文字、图标、图形等），具有继承性 相比fontColor仅控制文字颜色，foregroundColor适用范围更广 通过动态切换for
【鸿蒙原生应用开发实战】第四篇：详情页与收藏交互 — 动态数据切换与用户交互设计
2601_95150937的博客
06-14 180
本文介绍了"宇宙探索"App中详情页的开发实现。详情页包含天体名称区、描述区、基本信息网格、趣味知识和收藏按钮等功能模块。文章重点讲解了路由参数接收、动态数据加载、2×2网格布局设计、收藏状态切换等关键技术点。通过InfoItem组件实现卡片式布局，使用@State管理收藏状态，并展示了从详情页返回时保持数据一致性的方法。完整代码包含了顶部返回、天体信息展示、基础数据网格和趣味知识等核心功能的实现细节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红目香薰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值