一、常用组件

1.文本展示与输入组件

• Text 文本展示基础文字渲染，可设置字号、字体颜色、字重，全页面通用
• TextInput 单行输入框登录、搜索、短文本录入场景

2.图片与媒体组件

• Image 图片组件展示头像、图标、轮播图、背景图，搭配 objectFit 控制图片缩放模式
• Video 视频播放器支持本地、网络视频播放，提供基础播放控制能力

3.交互选择控件（表单、操作按钮）

• Button 按钮页面核心交互控件，用于提交、页面跳转、触发各类点击事件
• Radio + RadioGroup 单选框单选选择场景，如性别、分类单一选项选择
• Toggle 多功能开关控件三种形态：开关按钮、复选框、单选框，多用于设置类功能

4.通用全局样式（所有布局共用组件）

①尺寸 width /height

• 固定尺寸：直接填数字，单位 fp，如 width (60)
• 百分比适配：传入字符串百分比，width ('100%') 铺满父容器
• 自适应内容：height ('auto')，高度随内部内容自动变化

②backgroundColor /fontColor 颜色

• 系统颜色常量：传 Color 枚举，fontColor (Color.Black)
• 十六进制颜色：传 8 位十六进制数字，backgroundColor (0xff00ff00)
• 透明背景：backgroundColor (Color.Transparent)

③padding /margin 间距

• padding：组件内部内容与自身边框留白
  • 单值：padding (10) 四边统一 10fp
  • 四值：padding (10,20,10,20) 上、右、下、左分别设置
• margin：组件外部与其他组件之间留白，传参规则同 padding

④borderRadius 圆角

• 基础用法：borderRadius (10) 四角统一圆角
• 圆形头像：圆角值是组件宽高数值的一半

⑤border 边框

    传入对象配置边框三要素：线条宽度、颜色、虚线样式  例：.border ({width:1, color:0xcccccc})

⑥shadow 阴影

    给卡片、按钮添加立体效果，可设置阴影半径、横向 / 纵向偏移、阴影颜色

⑦透明度 opacity

取值范围 0~1，0 完全透明，1 完全不透明

⑧图片缩放 objectFit（仅 Image 组件使用）

• Cover：填满容器，裁掉超出画面部分，头像、轮播常用
• Contain：完整显示整张图片，容器空白处留白

⑨对齐样式

两个核心属性：

 justifyContent 主轴对齐

• Row 主轴：水平左右方向；Column 主轴：垂直上下方向可选参数：
• FlexAlign.Center：主轴居中
• FlexAlign.Start：靠起始边（Row 靠左，Column 靠上）
• FlexAlign.End：靠结束边（Row 靠右，Column 靠下）
• FlexAlign.SpaceBetween：元素贴两端，中间均分空白
• FlexAlign.SpaceAround：每个元素两侧均匀留白

 alignItems 交叉轴对齐

• Row 交叉轴：垂直上下；Column 交叉轴：水平左右可选参数：
• AlignItems.Center：交叉轴居中（最常用，图文垂直居中）
• AlignItems.Start：靠交叉轴起始边
• AlignItems.End：靠交叉轴结束边

二、布局容器组件

1.RelativeContainer 相对布局

• 常用搭配：Text、Image、Button、Radio、Card、TextInput

2.Column 垂直布局

• 常用搭配：Text、TextInput、Button、Image、Card、Toggle、Radio

3.Row 水平布局

• 常用搭配：Text、Image、Button、Radio、Toggle

4.Flex 弹性布局

• 常用搭配：Button、Text、Image、Radio、Toggle

5.Stack 层叠布局

• 常用搭配：Image、Text、Button、Card

6.Swiper 轮播容器

• 常用搭配：Image、Text、Card

7.Tabs + TabContent 标签页布局

• 常用搭配：Column、Row、Image、Text、Button

8.Card 卡片容器（内容布局容器）

• 常用搭配：Row、Column、Text、Image、Button、Radio