鸿蒙 ArkTS 基础组件与通用样式学习笔记 📅 2026/6/30 16:33:44 一、常用基础组件分类学习1. 五大布局容器页面搭建基础布局就是用来摆放页面里所有文字、按钮、图片的 “容器框架”一共五种垂直布局 Column组件从上往下竖着排列登录、注册表单页面基本全靠它。水平布局 Row组件从左往右横向并排适合一行放两个按钮、图文并排。弹性布局 Flex升级版横竖布局能自动分配空间、适配不同屏幕尺寸。层叠布局 Stack组件一层叠一层比如图片上写字、头像加小红点角标。相对布局 RelativeContainer自由控制控件位置不用死板按行列排序。所有布局有统一硬性规则一个页面只能有 1 个最外层根布局复杂界面可以在根布局里面嵌套别的布局。2. 页面交互 展示组件轮播图 Swiper首页自动滚动展示图片Text纯文字展示标题、提示文字专用TextInput输入框填写账号、密码、手机号Button可点击按钮用于登录、提交、注册操作二、通用样式设计规范实训统一标准写页面时不用每次乱调参数整理了一套通用样式规则所有组件都能复用。1. width/height 尺寸规范页面整体宽度统一设置 100%铺满整个手机屏幕一般在代码最下方加入若需要单独控制大小也可在需修改 的代码下2. 背景与字体颜色 backgroundColor /fontColor两种填色方式3. 内边距 padding 外边距 marginpadding组件内部文字、内容和自身边框的距离margin当前组件和旁边其他组件之间的空隙。4. borderRadius 圆角设置普通按钮圆角8~12信息卡片圆角12~16圆形头像圆角数值设为宽高的一半。搭配五大布局使用控制组件居中、居左、居右、上下对齐是页面排版美观的关键。