一、ArkUI的三要素1.Entry页面入口的装饰器用于标记当前自定义组件作为页面入口的组件可以独立运行。2.Component组件装饰器用于定义自定义UI组件被标记的结构体可以用于构建界面视图3.build:构建组件的方法所有的布局内容必须在写这个方法的内部。二、arkUI布局1. Column 垂直布局• space统一设置子组件间距官方推荐写法替代手动margin界面更规整• justifyContent主轴垂直对齐包含居顶、居中、居底、均分对齐• alignItems交叉轴水平对齐包含左对齐、居中、右对齐• width/height布局容器尺寸铺满屏幕是页面布局基础• backgroundColor布局背景色用于区分页面模块2.Row水平布局定义元素从左至右依次排列主轴为水平方向交叉轴为垂直方向3.Stack层叠布局定义一个组件嵌套一个组件EntryComponentstruct 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弹性布局定义自适应屏幕宽度子组件超出自动换行适配不同尺寸设备。EntryComponentstruct 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则在第一页或最后一页时无法继续向前或者向后切换页面。实例创建一个简单页面的轮播展示效果EntryComponentstruct 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)先写出代码然后打开设备管理器里的手机启动完成后将写出的代码运行重新运行代码后代码展示EntryComponentstruct 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)实例代码EntryComponentstruct 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实例代码如下EntryComponentstruct 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组件可以在一个页面内快速实现视图内容的切换一方面提升查找信息的效率另一方面精简用户单次获取到的信息量。应用当页面信息较多时为了让用户能够聚焦于当前显示的内容需要对页面内容进行分类提高页面空间利用率。效果图核心代码展示EntryComponentstruct 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中输入纯文本时应优先考虑使用此文本组件。例如请做一个个人信息采集页面效果图如下EntryComponentstruct 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组件提供状态按钮样式、勾选框样式和开关样式一般用于两种状态之间的切换.核心代码展示EntryComponentstruct 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%)}}