Ark布局
一、ArkUI的三要素
1.@Entry：页面入口的装饰器，用于标记当前自定义组件作为页面入口的组件，可以独立运行。
2.@Component：组件装饰器，用于定义自定义UI组件，被标记的结构体可以用于构建界面视图3.@build:构建组件的方法，所有的布局内容必须在写这个方法的内部。
二、arkUI布局
1. Column 垂直布局
• space：统一设置子组件间距，官方推荐写法，替代手动margin，界面更规整
• justifyContent：主轴（垂直）对齐，包含居顶、居中、居底、均分对齐
• alignItems：交叉轴（水平）对齐，包含左对齐、居中、右对齐
• width/height：布局容器尺寸，铺满屏幕是页面布局基础
• backgroundColor：布局背景色，用于区分页面模块
2.Row水平布局
定义：元素从左至右依次排列，主轴为水平方向，交叉轴为垂直方向
3.Stack层叠布局
定义：一个组件嵌套一个组件
@Entry
@Component
struct StackNestDemo { build() {
Column({ space: 30 }) {
Text("个人主页")
.fontSize(30)
.fontWeight(FontWeight.Bold)
// 内层嵌套：Stack层叠 + Row横向布局
Row({ space: 20 }) { Stack() {
Image($r('app.media.start_icon'))
.width(100)
.height(100)
.borderRadius(50) Text("VIP")
.fontSize(14)
.fontColor(Color.White)
.backgroundColor(0xFF3333)
.padding(4)
.borderRadius(6) }
Column({ space: 10 }) {
Text("鸿蒙开发者").fontSize(22).fontWeight(FontWeight.Medium) Text("专注鸿蒙应用开发实训").fontSize(18).fontColor(Color.Gray)
}
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.backgroundColor(0xFFFFFF) }
}
4.Flex弹性布局
定义：自适应屏幕宽度，子组件超出自动换行，适配不同尺寸设备。
@Entry
@Component
struct FlexBaseDemo { build() {
Flex({ wrap: FlexWrap.Wrap, space: 12 }) { Text("鸿蒙基础")
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor(0xE8F4FF)
.borderRadius(20)
.fontSize(16) Text("ArkTS语法")
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor(0xE8F4FF)
.borderRadius(20)
.fontSize(16) Text("ArkUI布局")
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor(0xE8F4FF)
.borderRadius(20)
.fontSize(16) Text("组件开发")
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor(0xE8F4FF)
.borderRadius(20)
.fontSize(16) Text("页面跳转")
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor(0xE8F4FF)
.borderRadius(20)
.fontSize(16) Text("数据存储")
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.backgroundColor(0xE8F4FF)
.borderRadius(20)
.fontSize(16) }
.width('100%')
.padding(20) }
}
5.相对布局
定义：RelativeLayout 相对布局，是安卓传统五大布局之一，控件位置通过相对关系确定：以父容器、其他控件作为参照物，设置左、右、上、下、居中、对齐等规则摆放控件，无需固定坐标，适配性强。
6.轮播图
定义：是一组多张图片自动循环切换展示的 UI 组件，同时支持手动左右滑动切换图片，常附带指示器小圆点、左右切换箭头。
7.tabs
定义：是移动端 / 网页常用 UI 组件，由多个标签（Tab）组成，点击不同标签，下方区域切换对应内容，实现同一页面多模块快速切换，不用新开页面。
鸿蒙ArkUI入门：ArkUI常用组件汇总
一.轮播图（Swiper）
定义：Swiper本身是一个容器组件，组件提供滑动轮播显示的作用。
应用：在一些应用首页显示推荐的内容时，需要用到轮播图 。
核心代码实现需要我们掌握loop（循环播放）
通过loop属性控制是否循环播放，该属性默认值为true。
当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
实例：创建一个简单页面的轮播展示效果
@Entry
@Component
struct SwiperDemo{
build() {
Column(){
Swiper(){
Text('0')
.backgroundColor(Color.Gray)
.fontSize(30)
Text('1')
.backgroundColor(Color.Yellow)
.fontSize(30)
Text('2')
.backgroundColor(Color.Blue)
.fontSize(30)
Text('3')
.backgroundColor(Color.Green)
.fontSize(30)
}
.width('100%')
.height('30%')
.autoPlay(true)
.interval(2000)
.loop(true)
}
}
}
二.视频 (Video)
定义：Video组件用于播放视频文件并控制其播放状态
应用：常用于短视频和应用内部视频的列表页面。
核心代码实现：需要我们先找到一个视频，然后保存在这个目录下
如上图所示，bb.mp4就是我所保存的视频
理解掌握这条视频代码，private videoSrc:Resource = $rawfile('视频名称.mp4')
先写出代码，然后打开设备管理器里的手机
启动完成后，将写出的代码运行
重新运行代码后
代码展示：
@Entry
@Component
struct Index {
private videoSrc:Resource = $rawfile('bb.mp4')
private pict:Resource=$r('app.media.background')
private controller:VideoController = new VideoController()
build() {
Column() {
Video({
src:this.videoSrc,
previewUri: this.pict,
controller: this.controller
})
.height('50%')
//是否静音
.muted(true)
//循环播放
.loop(true)
//自动播放
.autoPlay(false)
.controls(true) // 设置是否显示默认控制条
}
.width('100%')
.height('100%')
}
}
三.图片(Image)
定义：开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等
应用：通常显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、jpeg等格式，不支持apng和svga格式
要点：
Image通过调用接口来创建，接口调用形式如下：
Image(src: PixelMap | ResourceStr | DrawableDescriptor)
存放图片时，我们把图片放到media目录下，如图所示
核心代码：
Image('images/view.jpg')
.width(200)
实例代码：
@Entry
@Component
struct imagess{
build() {
Column({space:30}){
Text('鸿蒙应用开发实战课程')
.fontSize(20)
.textAlign(TextAlign.Center)
Stack(){
Image($r('app.media.sky'))
.width(320)
.height(180)
.borderRadius(15)
.objectFit(ImageFit.Cover)
}
Column(){
Text('ArkUI实际应用开发课程')
.fontSize(22)
.fontColor(Color.White)
.backgroundColor(0x550e00)
.padding(10)
.borderRadius(8)
}
Button('开始学习')
.type(ButtonType.Capsule)
}
.width('100%')
.height('100%')
.padding({top:50})
}
}
效果图：
四.按钮
定义：Button是按钮组件，作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。
应用：通常用于响应用户的点击操作
类型：Button有四种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）、普通按钮（Normal）和圆角矩形按钮（ROUNDED_RECTANGLE）
实例：
代码如下：
@Entry
@Component
struct ButtonDemo1{
build() {
Column({space:20}){
Button('确认提交')
.height(50)
.width(150)
.fontSize(26)
.borderRadius(35)
Button('取消操作')
.height(50)
.backgroundColor(0x999999)
.width(150)
.fontSize(26)
.borderRadius(35)
Button('确认删除')
.height(50)
.backgroundColor(Color.Red)
.width(150)
.fontSize(26)
.borderRadius(35)
Button('登录')
.height(50)
.backgroundColor(Color.Gray)
.width(150)
.border({width:7,color:0x007DFF})
.fontSize(26)
.borderRadius(35)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
五.选项卡(Tabs)
定义：Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。
应用：当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。
效果图：
核心代码展示：
@Entry
@Component
struct TabsBase3{
private bannerList:Resource[]=[//新建变量读取内容
$r('app.media.first'),
$r('app.media.second'),
$r('app.media.third')
]
private bannerList2:Resource[]=[//新建变量读取内容
$r('app.media.second'),
$r('app.media.first'),
$r('app.media.third')
]
build(){
Tabs(){
TabContent(){
Column({space:30}){
Text('欢迎来到河北软件职业技术学院')
.fontSize(22)
.fontWeight(FontWeight.Bolder)
Swiper(){
ForEach(this.bannerList,(item:Resource)=>{
Image(item)
.width('98%')
.height('100%')
.objectFit(ImageFit.Cover)
.borderRadius(20)
})
}
.width('100%')
.height('30%')
.autoPlay(true) //自动播放
.interval(1000) //自动播放的间隔
.loop(true) //是否循环播
Text('河北软件职业技术学院是河北省公办全日制高职，2003 年建校、办学溯源至 1972 年，坐落于保定，隶属省教育厅，为省内首家独立建制、以信息技术（ICT） 为核心的公办高职，是国家 “双高计划” 建设单位、国家优质专科、国家示范性软件职业技术学院河北软件职业技术学院')
.fontSize(20)
}
.width('100%')
.height('100%')
.padding(20)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}.tabBar('学校简介')
TabContent(){
Column({space:30}){
Text('欢迎来到计算机应用工程系')
.fontSize(24)
.fontWeight(FontWeight.Bolder)
Swiper(){
ForEach(this.bannerList2,(item:Resource)=>{
Image(item)
.width('98%')
.height('100%')
.objectFit(ImageFit.Cover)
.borderRadius(20)
})
}
.width('100%')
.height('30%')
.autoPlay(true) //自动播放
.interval(1000) //自动播放的间隔
.loop(true) //是否循环播
Text('计算机应用工程系成立于2002年，是学院重点系部、河北省云计算与IDC人才培养核心基地，在校生2000余人河北软件职业技术学院。立足京津冀，聚焦云计算、信息安全、区块链等新一代信息技术，办学实力与就业质量位居省内同类院校前列河北软件职业技术学院。')
.fontSize(20)
}
.width('100%')
.height('100%')
.padding(20)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}.tabBar('系部简介')
TabContent(){Text('个人中心页面').fontSize(24)}.tabBar('专业简介')
TabContent(){Text('关于我们页面').fontSize(24)}.tabBar('班级简介')
}
.barPosition(BarPosition.Start)
}
}
六.文本/输入框
定义：主要用于显示静态文本
TextInput是单行输入框，TextArea是多行输入框
应用：当需要在单行输入框（TextInput）或多行输入框（TextArea）中输入纯文本时，应优先考虑使用此文本组件。
例如：请做一个个人信息采集页面
效果图如下：
@Entry
@Component
struct TextDemo{
build() {
Column({space:35}){
Text('个人信息采集!')
.fontSize(30)
.fontColor(Color.Blue)
.fontWeight(FontWeight.Bolder)
.textAlign(TextAlign.Center)
.width('100%')
TextInput({placeholder:"姓名"})
.type(InputType.Normal)
.height(70)
.width(280)
.backgroundColor(Color.Gray)
.borderRadius(24)
TextInput({placeholder:"年龄"})
.type(InputType.Number)
.height(70)
.width(280)
.backgroundColor(Color.Gray)
.borderRadius(24)
TextInput({placeholder:"手机"})
.type(InputType.Normal)
.height(70)
.width(280)
.backgroundColor(Color.Grey)
.borderRadius(24)
TextInput({placeholder:"电子邮箱"})
.type(InputType.Normal)
.height(70)
.width(280)
.backgroundColor(Color.Gray)
.borderRadius(24)
TextInput({placeholder:"所在班级"})
.type(InputType.Normal)
.height(70)
.width(280)
.backgroundColor(Color.Gray)
.borderRadius(24)
}
.height('100%')
.width('100%')
}
}
七.单选框(Radio)
定义：Radio是单选框组件
应用：通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中
添加事件
除支持通用事件外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。
Radio({ value: 'Radio1', group: 'radioGroup' })
.onChange((isChecked: boolean) => {
if(isChecked) {
//需要执行的操作
}
})
Radio({ value: 'Radio2', group: 'radioGroup' })
.onChange((isChecked: boolean) => {
if(isChecked) {
//需要执行的操作
}
})
八.Toggle
定义：Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换.
核心代码展示：
@Entry
@Component
struct ToggleDemo{
build() {
Column(){
Toggle({
type: ToggleType.Switch,
isOn: true
})
.width(150)
.height(50)
.selectedColor(Color.Red)
.id('n1')
Toggle({
type: ToggleType.Checkbox,
isOn: false
})
.width(150)
.height(50)
.selectedColor(Color.Red)
.id('n1')
}
.width('100%')
.height('100%')
}
}