目录
- 装饰器
- @Entry(入口)
- @Component(组件)
- @State(状态)
- @Preview(预览)
- Previewer
- Inspector
- 结构体
- struct
- build
- 自定义组件
- 自定义 Custom 组件
- 容器
- Row(行) & Column(列)
- RelativeContainer(相对布局容器)
- margin
- padding
- Grid(网格容器)
- List(列表)
- 组件
- Image(图片)
- 图片的填充模式
- Text(文本)
- 组件:左上角对齐
- 文字:左对齐
- Swiper(轮播图)
- 参考
装饰器
@Entry(入口)
@Entry 装饰的 @Component 将作为 UI 页面的入口
在单个 UI 页面中,最多可以使用@Entry 装饰一个自定义组件
@Entry
@Component
struct Index {}
@Component(组件)
@Component 装饰了 struct 关键字声明的数据结构 Index
Index 被 @Component 装饰后具备组件化的能力,通过实现 build 方法描述 UI
@Component
struct Index {build() {}
}
@State(状态)
文本信息由 @State 装饰器装饰的状态变量 message 驱动
@State message: string = 'HarmonyOS 速记';
@Preview(预览)
Previewer
- Previewer 可以直接预览 @Entry 装饰的整个页面
也可以预览由 @Preview 装饰的单独组件- 预览 @Entry 装饰的整个页面时,需要选中 @Entry 所在的文件,Previewer 才能顺利打开
- 将 Previewer 调整至 ComponentMode,便可以单独预览组件视图
- 如果修改的是文本内容,则需要手动保存(即 ctrl+s)后,Previewer 才会更新
如果修改的是相关属性,则不需要手动保存,Previewer 也会实时更新- 注意:此时的 Inspector 是不可用状态
Inspector
开启 Previewer 工具栏的 Inspector 工具,可以观察到当前组件树,并与 Previewer 交互
结构体
struct
定义结构体,即数据结构
struct Index {}
build
build 方法用于描述 UI
build() {}
自定义组件
@Component
struct Custom {build() {}
}
自定义 Custom 组件
@Preview // 用于组件预览
@Component // 定义组件
struct Custom { // 组件名build() {Image($r('app.media.banner_pic1')) // 图片.width('100%') // 宽度.padding({ // 内边距left: 16,top: 10,right: 16,bottom: 10}).borderRadius(16) // 圆角.objectFit(ImageFit.Contain) // 缩放模式}
}
容器
Row(行) & Column(列)
Row() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')
RelativeContainer(相对布局容器)
alignRules 在 RelativeContainer 中设置对齐规则(位置:上中下、左中右)
- top、center、bottom 上中下
- left、middle、right 左中右
注:alignRules 属性在 Row & Column 容器中无效
// 水平、竖直居中RelativeContainer() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).alignRules({ // 对齐规则center: {anchor: '__container__',align: VerticalAlign.Center},middle: {anchor: '__container__',align: HorizontalAlign.Center}})}.width('100%').height('100%')
函数 alignRules 声明
alignRules(value: AlignRuleOption): T;
参数 AlignRuleOption 源码
declare interface AlignRuleOption {top?: { // 上anchor: string;align: VerticalAlign;};center?: { // 中anchor: string;align: VerticalAlign;};bottom?: { // 下anchor: string;align: VerticalAlign;};left?: { // 左anchor: string;align: HorizontalAlign;};middle?: { // 中anchor: string;align: HorizontalAlign;};right?: { // 右anchor: string;align: HorizontalAlign;};bias?: Bias;
}
结论
top、center、bottom、left、middle、right
- 对应着 设置子控件的基线,即以子控件的哪个位置作为对齐的基准点
VerticalAlign#Top、Center、Bottom & HorizontalAlign#Start、Center、End
- 这些属性才是对应着 设置子控件相对于父布局的对齐规则,但需要配合上面的使用才会得到想要的正确效果
margin
外边距
Text(this.message).margin({left: 20,top: 20,right: 20,bottom: 20})
padding
内边距
Text(this.message).padding({left: 20,top: 20,right: 20,bottom: 20})
Grid(网格容器)
网格容器,由“行”和“列”分割的单元格所组成,其中容器内各条目对应一个 GridItem 组件
如果仅设置行、列数量与占比中的一个,则网格单元将按照设置的方向排列,超出Grid显示区域后,Grid拥有可滚动能力
设置单行显示,则赋能套件部分可以横向滑动
List(列表)
List容器可以轻松高效地显示结构化、可滚动的信息。当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能
组件
Image(图片)
用于显示图片,使用 $r(‘app.media. 文件名字’) 将 media 文件夹下的图片读取到 Image 组件
Image($r('app.media.banner_pic1')) // 设置图片资源.width('100%') // 宽度.padding({ // 内边距left: 16,top: 10,right: 16,bottom: 10}).borderRadius(16) // 圆角.objectFit(ImageFit.Contain) // 缩放模式
图片的填充模式
.objectFit(ImageFit.Contain)
设置图片的填充模式
- Contain 模式,即保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内
Text(文本)
组件:左上角对齐
Text(this.message) // 默认宽度 wrap_content.id('HelloWorld').fontSize(20).fontWeight(FontWeight.Bold).fontStyle(FontStyle.Italic).lineHeight(55).alignRules({ // 对齐规则:左上角(top、left) 为 对其基准点top: { // 上边缘 为 对其基准点anchor: '__container__',align: VerticalAlign.Top // 上对齐},left: { // 左边缘 为 对其基准点anchor: '__container__',align: HorizontalAlign.Start // 左对齐}})
文字:左对齐
Text(this.message).width('100%') // 设置宽度 match_parent.textAlign(TextAlign.Start) // 设置文字朝向 居左
Swiper(轮播图)
使用Swiper构建轮播图
参考
HarmonyOS应用开发快速入门