1. 已安装 DevEco Studio

2. 电脑配置要：

- 开启 CPU 虚拟化 

- 内存 ≥ 8GB

- 预留 10GB 以上磁盘空间

步骤 1：打开设备管理器

启动 DevEco Studio，在顶部菜单栏点击 `Tools` → `Device Manager`。

步骤 2：新建模拟器（可选，用于创建新设备）

1. 点击页面右下角的 `+ 新建模拟器` 按钮。

2. 选择设备页面配置：

3. 虚拟设备配置页面：

- 填写「名称」：避免与已有设备重名

- 屏幕配置：选择对应设备型号，分辨率、尺寸会自动填充。

- 硬件配置：内存、存储空间，可根据电脑配置调整。

- 点击「完成」

步骤 3：启动模拟器并运行应用

1. 回到「本地模拟器」页面，找到目标模拟器，点击右侧的启动按钮。

2. 等待模拟器加载完成。

3. 模拟器启动后，即可在 DevEco Studio 中点击运行按钮

鸿蒙 ArkUI 开发基础速查表

前言

日常 ArkUI 开发中，布局容器、基础 UI 组件、通用样式是页面搭建的核心，本文整理高频使用组件功能、极简可运行代码与统一设计规范，适合日常开发快速查阅，统一项目 UI 风格。

一、五大基础布局容器

1. Column 垂直布局

作用：容器内子元素自上而下垂直排列，是页面最外层常用根容器。

ets

// 铺满页面宽度，子元素居中垂直排布
Column(){
  Text("第一行")
  Text("第二行")
}
.width("100%")
.justifyContent(FlexAlign.Center)
.alignItems(ItemAlign.Center)

2. Row 水平布局

作用：容器内子元素从左至右水平排列，多用于按钮组、单行信息栏。

ets

// 统一高度50fp，左右两端对齐
Row(){
  Button("取消")
  Button("确认")
}
.width("100%")
.height(50)
.justifyContent(FlexAlign.SpaceBetween)

3. Flex 弹性布局

作用：兼容水平 / 垂直排布，支持自动换行，适合标签流、多列自适应布局。

ets

// 自动换行流式标签布局
Flex({ wrap: FlexWrap.Wrap }) {
  Text("标签1").width(80).margin(6)
  Text("标签2").width(80).margin(6)
  Text("标签3").width(80).margin(6)
}
.width("100%")

4. Stack 层叠布局

作用：子组件上下堆叠覆盖，可实现图片 + 文字浮层、弹窗遮罩场景。

ets

// 底层图片，上层叠加白色文字
Stack(){
  Image($r("sys.media.ohos_logo"))
  Text("浮层文字").fontColor(Color.White)
}
.width(200)
.height(200)

5. RelativeContainer 相对布局

作用：通过组件 ID 互相锚定定位，摆脱线性排布，实现自由不规则页面。

ets

RelativeContainer(){
  Text("标题").id("title")
    .alignRules({top:{anchor:"__container",align:VerticalAlign.Top}})
  Button("操作按钮").id("btn")
    .alignRules({left:{anchor:"title",align:HorizontalAlign.End}})
}
.width("100%")
.height(300)

二、拓展业务容器组件

1. Swiper 轮播图

作用：横向滑动切换多张图片 / 页面，首页 banner 必备组件。

ets

Swiper(){
  Image($r("sys.media.ohos_logo"))
  Image($r("sys.media.ohos_logo"))
  Image($r("sys.media.ohos_logo"))
}
.width("100%")
.height(200)
.indicator(SwiperIndicator()) // 开启底部指示器

2. Tabs 选项卡

作用：顶部标签栏切换多页面内容，分类页面核心组件。

ets

Tabs(){
  TabContent(){ Text("页面1内容") }.tabBar("标签1")
  TabContent(){ Text("页面2内容") }.tabBar("标签2")
}
.width("100%")
.height(400)

三、基础交互 UI 组件

1. Text 文本组件

作用：展示静态文字、标题、说明文案。

ets

Text("标准正文文本")
.fontSize(16)
.fontColor(0xff333333)
.fontWeight(FontWeight.Medium)

2. TextInput 输入框

作用：接收用户输入文字，用于登录、搜索、表单填写。

ets

TextInput({ text: "" })
.width("100%")
.height(50)
.padding(12)
.borderRadius(10)
.border({width:1,color:0xffeeeeee})

3. Button 按钮组件

作用：点击触发业务交互，提交、跳转、弹窗确认等操作入口。

ets

Button("提交表单")
.width("100%")
.height(50)
.backgroundColor(0xff007dff)
.borderRadius(10)

4. Image 图片组件

作用：加载本地 / 网络图片，头像、banner、图标展示。

ets

// 圆形头像示例
Image($r("sys.media.ohos_logo"))
.width(120)
.height(120)
.borderRadius(60)
.objectFit(ImageFit.Cover)

5. Radio 单选框

作用：单选选择，同一分组内仅可选中一项，问卷、筛选场景使用。

ets

Row(){
  Radio({ value: "1", group: "radioGroup" })
  Text("选项一")
}

四、项目通用统一样式规范（附代码示例）

统一 UI 样式可保持页面视觉一致性，整理项目高频样式属性与标准取值：

1. width /height 尺寸控制

作用：控制组件宽高 规范：页面容器 width("100%")；按钮 / 输入框高度固定50fp；头像正方形100/120fp

ets

.width("100%")
.height(50)

2. backgroundColor /fontColor 色彩

作用：设置组件背景色、文字颜色 三种写法：系统内置色、十六进制色、透明背景

ets

.backgroundColor(0xffffffff) // 十六进制背景
.fontColor(Color.Black) // 系统文字色
// 透明背景：.backgroundColor(Color.Transparent)

3. padding /margin 内外边距

作用

• padding：组件内部内容与边框的距离
• margin：当前组件和其他相邻组件的间距

ets

.padding(16) // 统一内边距
.margin({top:8,left:10,right:10}) // 自定义外边距

4. borderRadius 圆角

作用：设置组件边角圆弧，统一视觉柔和度 规范：按钮 8~12、卡片 12~16、头像取宽高一半实现圆形

ets

.borderRadius(14) // 卡片标准圆角

5. border 边框

作用：给组件添加外描边线条，分割线、输入框边框使用

ets

.border({width:1,color:0xffeeeeee})

6. shadow 阴影

作用：增加卡片、弹窗立体凹凸层次感，提升质感

ets

.shadow({ radius: 8, color: 0x1a000000, offsetX: 2, offsetY: 2 })

7. opacity 透明度

作用：控制组件整体通透程度，取值范围 0~1 0 = 完全透明，1 = 完全不透明

ets

.opacity(0.95)

8. objectFit 图片填充规则

作用：控制图片在 Image 容器内的适配方式

• Cover：铺满容器，超出区域裁剪（头像首选）
• Contain：完整展示图片，留白填充

ets

.objectFit(ImageFit.Cover)

9. 对齐属性 justifyContent /alignItems

作用：控制 Column/Row/Flex 容器内部子元素排布位置

ets

.justifyContent(FlexAlign.Center) // 主轴居中
.alignItems(ItemAlign.Center) // 交叉轴居中