2025全网最全 鸿蒙面试题 HarmonyOS NEXT 5.0

氧气685
564 阅读11分钟

​

 ArkUI 阶段

1. ArkTS和TS有什么区别?

ArkTS 大量借鉴了 TypeScript（TS）的语法，同时继承了众多 ES6 的方法与属性，像 Object.keys 方法以及字符串和数组相关的常用方法都得以沿用。不过，为满足鸿蒙系统开发等场景对高效、稳定与安全编程的要求，ArkTS 在性能方面做出了考量，制定了比 TS 更为严格的规范：

类型规范严格

  1. 严格限制动态类型：ArkTS 对动态类型的使用近乎全面禁止。例如，解构赋值这种在 TS 里常用的操作，在 ArkTS 中是不被允许的。
  2. 限制延展运算符的使用：延展运算符在 ArkTS 里仅能用于数组，其他场景一概禁止。
  3. 禁止改变 this 指向：call、apply 和 bind 这些可改变 this 指向的方法，在 ArkTS 中被禁用。
  4. 禁用特定类型与字面量类型：ArkTS 不支持字面量类型，并且禁用了 any 和 unknown 类型。
  5. 明确数据类型声明：对于一些特定的数据，必须明确声明其类型。比如，使用 State 修饰的变量就需要明确指定类型。

2.ArkUI的核心设计思想是什么?

声明式开发

ArkUI 采用声明式 UI 范式，与 React 和 Vue 类似，通过状态驱动视图更新。这种方式让开发者只需声明界面的最终状态，系统会根据状态的变化自动更新界面，避免了传统命令式编程中手动操作 DOM 的复杂性，大大提高了开发效率。

跨平台能力

ArkUI 支持一套代码在多种设备上运行，如手机、平板、手表、电视等。它借助自适应布局机制，能够根据不同设备的屏幕大小自动调整界面布局，开发者无需为每个设备单独编写布局代码。这一特性极大地降低了开发成本，缩短了开发周期。

用户体验优先

为了提升用户体验，ArkUI 对渲染引擎进行了优化，使界面滑动更加流畅。同时，它提供了统一设计规范的组件库，如按钮、弹窗等样式保持一致，确保了多端体验的一致性。无论用户使用何种设备，都能获得稳定、优质的交互体验。

多语言支持与可扩展性

ArkUI 支持 JavaScript、TypeScript、Java 等多种编程语言，开发者可以根据自身的技术栈和项目需求选择合适的语言进行开发。此外，它还允许开发者自定义组件插件，方便扩展功能，满足不同项目的个性化需求。

3.线性布局

  1. 线性布局 (LinearLayout) 是开发中最常用的布局，通过线性容器 Row 和 Column 构建。
  2. Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。
  3. 根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局

4.线性布局对齐方式

主轴对齐（沿组件排列方向）

  • start：这是主轴对齐的默认方式。当为水平布局时，组件会靠左排列；当为垂直布局时，组件会靠上排列。
  • end：若选择此对齐方式，在水平布局下组件会靠右排列，垂直布局下则靠下排列。
  • center：组件会在主轴方向上居中排列。
  • space - between：组件会实现两端对齐，即首尾组件分别紧贴容器的两端，而中间组件之间的间距会被均分。
  • space - around：每个组件的左右（水平布局）或上下（垂直布局）间距相等，不过容器两端会留出一半的间距。

交叉轴对齐（垂直于排列方向）

  • start：在水平布局时，组件会进行顶部对齐。
  • end：采用该对齐方式，在水平布局中组件会实现底部对齐。
  • center：组件会在交叉轴方向上垂直居中。
  • stretch：这是交叉轴对齐的默认方式，组件会拉伸以填满交叉轴方向的空间。

5. 弹性布局

弹性布局是一种灵活高效的布局方案，分为单行布局与多行布局：

  • 单行布局核心特性：

    • 默认情况下，Flex 容器内的子元素沿单一 “轴线” 排列。若子元素尺寸总和超出容器范围，会自动挤压调整。
    • 支持主轴对齐（justifyContent）与交叉轴对齐（alignItems），轻松实现子元素在容器内的居中、两端对齐等效果。

  • 多行布局扩展：在单行布局基础上，可根据容器空间与布局规则，让子元素分行排列，进一步提升复杂场景下的布局适配能力。
    典型应用：以商品列表为例，借助弹性布局设置标题和价格 —— 标题自动填充剩余空间，价格保持固定宽度，整体布局能自适应不同屏幕尺寸，兼顾显示美观与适配灵活性

6. 如何选择 Flex 布局与 Column/Row 布局？

  • 简单排列场景：选 Column/Row
    若仅需单行排列（Row）或单列堆叠（Column）的基础布局，Column/Row 更简便。例如制作水平导航栏，通过 Row 设置间距即可完成，代码简洁，开发效率高。

  • 复杂布局场景：用 Flex
    需弹性分配空间（如组件撑满剩余宽度），或灵活控制对齐（如两端对齐、自动换行）时，Flex 布局更具优势。例如商品列表中，价格固定宽度，描述通过 flexGrow: 1 自动扩展，适配不同界面空间。

  • 性能与习惯维度

    • Column/Row 属线性布局，渲染性能略优，与 Flex 差异较小。
    • 团队熟悉传统布局，Column/Row 更易上手；若习惯 Web 端 Flexbox，直接用 Flex 布局更顺手。

  • 应用示例

    • 简单垂直列表 → 选 Column；
    • 自适应宽度的按钮组（需换行）→ 选 Flex，搭配 flexWrap: wrap 实现换行。

7. 层叠布局（堆叠）？

层叠布局基于 Stack 容器组件实现，核心特性是固定定位与元素层叠。容器内子元素按顺序 “入栈”，后一个子元素会覆盖前一个，既支持无规则叠加，也允许通过设置实现自定义位置排布。
通过 alignContent 可灵活调整子组件在层叠布局中的位置，精准控制视觉层级。
其典型应用场景为需要视觉覆盖的设计需求：

  • 图文信息整合：在图片上叠加文字标签，强化内容传达；
  • 状态可视化呈现：如按钮右上角的未读消息红点，直观展示状态更新；
  • 交互浮层设计：弹窗浮层覆盖背景，引导用户聚焦当前交互内容。

8. ArkUI 中常用的容器组件？

ArkUI 的容器组件丰富多样，适配不同开发场景：

  • 基础布局容器

    • Column：垂直堆叠子组件，用于垂直菜单、信息列表等单列布局。
    • Row：水平排列子组件，适合单行按钮组、导航栏等场景。
    • Flex：弹性分配空间，应对复杂自适应布局，如商品价格与描述的动态排版。
    • Stack：支持子组件层叠，用于图片叠标签、消息红点等视觉覆盖场景。

  • 复杂场景容器

    • List：展示长列表数据，支持滚动交互，适用于商品列表、聊天记录。
    • Grid：以网格形式排列子组件，常见于图片墙、功能模块卡片布局。
    • Swiper：实现组件轮播切换，用于广告图轮播、多内容分页展示。
    • Tabs：通过标签页切换内容区域，优化多模块信息分类呈现。
    • Popup：承载弹出层内容，如操作提示框、二次确认弹窗。

  • 特色功能容器

    • Divider：除分隔内容外，可组合相关元素，划分界面模块。
    • AdaptiveBox：智能适配设备特性，自动调整内部组件布局，提升跨端适配能力。
    • DirectionalLayout：灵活设置水平 / 垂直方向排列子组件，兼具 Column/Row 的布局灵活性。

9. @Extend、@Styles、@Builder 的区别：

  • @Styles：用于抽取公共样式与事件，适合统一管理组件共有的样式（如字体、颜色、边距）或通用事件逻辑，例如定义全局按钮的默认样式。其特点是不可传递参数，专注公共样式复用。
  • @Extend：核心是扩展特定组件的样式与事件，适用于针对某类组件（如按钮、文本框）做个性化样式或交互扩展，比如为按钮添加定制点击效果。它支持传递参数，可通过参数灵活调整扩展内容。
  • @Builder：侧重抽取组件的结构、样式与事件，常用于复用复杂组件结构（如自定义卡片、弹窗），整合布局、样式和交互逻辑。同样支持传递参数，方便在不同场景复用组件时灵活调整。

10. 网格布局中的 Grid 与 GridItem

在 ArkUI 中，网格布局通过 Grid 和 GridItem 配合实现，可将界面元素按二维网格排列，适用于规整化、矩阵式的布局场景（如商品卡片展示、功能图标排列）。

  • Grid：网格容器
    作为网格布局的容器，Grid 用于定义整体结构与属性：

    • columns：设置网格列数，例如设为 3，布局将划分为 3 列。
    • spacing：指定网格项间距，支持统一值或分别设置水平、垂直间距。
    • rows：可自定义网格行数，也可根据子组件数量与列数自动计算。
    • direction：决定排列方向，包含水平（FlexDirection.Row）和垂直（FlexDirection.Column）两种模式。

  • GridItem：网格子项
    作为 Grid 容器的子组件，GridItem 用于承载文本、图片等具体内容。通过 rowStart、rowEnd、columnStart、columnEnd 等属性，可精准控制 GridItem 在网格中占据的行、列范围，实现跨多个网格单元格的布局效果，灵活应对复杂排版需求。

11. 容器组件 Scroll

在 ArkUI 中，Scroll 组件用于包裹内部子组件。当子组件尺寸超出其可视区域时，用户可通过滚动操作查看完整内容，广泛应用于长文章浏览、商品列表展示等场景。

核心属性

  • scrollDirection：设定滚动方向，包含水平（ScrollDirection.Horizontal）与垂直（ScrollDirection.Vertical）两种模式，默认垂直滚动。
  • scrollBar：控制滚动条显隐，支持显示（ScrollBar.On）或隐藏（ScrollBar.Off）状态切换。
  • friction：调节滚动摩擦力，通过数值控制滚动顺滑度，数值越小滚动越流畅。

典型应用场景

  • 长文本阅读：新闻、小说等场景中，利用 Scroll 组件实现长文章的无缝滚动阅读。
  • 商品列表浏览：电商应用的商品展示列表，当商品数量较多时，用户可通过滚动查看全部商品。
  • 图片轮播展示：在图片展示场景中，借助水平滚动的 Scroll 组件，轻松实现图片轮播效果。

12. 容器组件 Tabs

在 ArkUI 中，Tabs 是通过页签实现内容视图切换的容器组件，每个页签对应独立内容视图，适用于分类信息展示与交互场景。

核心组成

  • TabBar：集成多个 Tab 标签，展示各标签页标题，用户点击即可触发内容切换。
  • TabContent：与 Tab 标签绑定，用于放置文本、图片、列表等具体内容。

关键属性

  • selectedIndex：定义当前选中的标签页索引（从 0 计数），既可设置默认显示页签，也支持代码动态修改以切换页签。
  • barPosition：决定 TabBar 的位置，提供顶部（BarPosition.Top）和底部（BarPosition.Bottom）两种布局选择，适配多样化界面设计。

典型应用

  • 多功能模块交互：如社交应用中，通过 Tabs 组件实现消息、联系人、动态等功能模块的快速切换。
  • 内容分类展示：新闻应用里，将时政、娱乐、体育等新闻类型以标签页形式呈现，方便用户切换浏览不同类别内容。

13. Badge 组件

Badge 是用于附加在单个组件上的信息标记（气泡）容器组件，主要用于突出显示状态或数字信息，如未读消息数、商品折扣标记等。

  • 核心属性：

    • count：设置标记数值，0 时不显示，大于 0 则显示对应数字。
    • value：支持设置字符串（如数字、符号），无论内容为何都会显示。
    • style：自定义标记样式，如颜色、尺寸、圆角等。

  • 基本使用示例：

  • Badge({
    count: 5, // 大于0显示数字5，0时不显示
    value: 'new', // 显示字符串内容
    style: { backgroundColor: '#ff4040', fontSize: 12 }
}) {
    // 被标记的子组件，如按钮、图标等
    Button('消息')
}

    14. 如何设置组件的垂直水平居中？

    根据不同布局方式，实现垂直水平居中的方法如下：

  • Row/Column 布局：
    通过 justifyContent('center')（主轴居中）和 alignItems('center')（交叉轴居中）组合实现。

  • Column() {
    Text('内容')
}
.justifyContent('center')
.alignItems('center')

  • Flex 布局：
    利用 justifyContent('center')（主轴居中）和 alignItems('center')（交叉轴居中）。

    typescript

    Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
    Text('内容')
}

  • Stack 布局：
    通过 alignContent('center') 直接设置子组件在容器内垂直水平居中。

    ​

Stack() {
    Text('内容')
}
.alignContent('center')

​

​

avatar
文章
阅读
粉丝