鸿蒙 ArkTS 基础组件与通用样式学习笔记

一、常用基础组件分类学习

1. 五大布局容器（页面搭建基础）

布局就是用来摆放页面里所有文字、按钮、图片的 “容器框架”，一共五种：

1. 垂直布局 Column：组件从上往下竖着排列，登录、注册表单页面基本全靠它。
2. 水平布局 Row：组件从左往右横向并排，适合一行放两个按钮、图文并排。
3. 弹性布局 Flex：升级版横竖布局，能自动分配空间、适配不同屏幕尺寸。
4. 层叠布局 Stack：组件一层叠一层，比如图片上写字、头像加小红点角标。
5. 相对布局 RelativeContainer：自由控制控件位置，不用死板按行列排序。

所有布局有统一硬性规则：一个页面只能有 1 个最外层根布局，复杂界面可以在根布局里面嵌套别的布局。

2. 页面交互 & 展示组件

• 轮播图 Swiper：首页自动滚动展示图片
• Text：纯文字展示，标题、提示文字专用
• TextInput：输入框，填写账号、密码、手机号
• Button：可点击按钮，用于登录、提交、注册操作

二、通用样式设计规范（实训统一标准）

写页面时不用每次乱调参数，整理了一套通用样式规则，所有组件都能复用。

1. width/height 尺寸规范

• 页面整体宽度统一设置 100%，铺满整个手机屏幕；
• 一般在代码最下方加入，若需要单独控制大小也可在需修改 的代码下

2. 背景与字体颜色 backgroundColor /fontColor

两种填色方式：

3. 内边距 padding & 外边距 margin

• padding：组件内部文字、内容和自身边框的距离；
• margin：当前组件和旁边其他组件之间的空隙。

4. borderRadius 圆角设置

• 普通按钮圆角：8~12；
• 信息卡片圆角：12~16；
• 圆形头像：圆角数值设为宽高的一半。

搭配五大布局使用，控制组件居中、居左、居右、上下对齐，是页面排版美观的关键。