手机网站 pc网站模板,在线设计平台哪个好,哈尔滨建站模板搭建,室内设计是什么这学期我学习了鸿蒙#xff0c;想用鸿蒙做一个鸿蒙商城app#xff0c;来展示一下。
项目环境搭建#xff1a;
1.开发环境#xff1a;DevEco Studio2.开发语言#xff1a;ArkTS3.运行环境#xff1a;Harmony NEXT base1
软件要求#xff1a;
DevEco Studio 5.0.0 Rel…
这学期我学习了鸿蒙想用鸿蒙做一个鸿蒙商城app来展示一下。
项目环境搭建
1.开发环境DevEco Studio2.开发语言ArkTS3.运行环境Harmony NEXT base1
软件要求
DevEco Studio 5.0.0 Release
HarmonyOS SDK版本API version 10
硬件要求:
华为手机或能够顺利运行DevEco Studio上的华为手机模拟器的电脑 1.欢迎界面实现
欢迎界面的实现过程如下首先我们创建了一个名为Index的组件使用Column容器组件构建布局并在其中添加了空白空间、文本和另一个Column容器。文本内容为“探索”和“购物乐趣”字体大小为50颜色为白色并且加粗。接着在Column容器中添加了一张图片图片资源位于resource文件夹下的logo图片素材中。整个欢迎界面的背景采用了渐变色颜色从#FF8469渐变到#FC4355。为了实现欢迎界面的闪屏变化效果我们添加了一个透明度变化的动画使用属性动画实现渐变过渡。在Column组件上添加了opacity属性并使用state修饰器声明了一个状态变量opacityValue初始值为0.3。在生命周期函数onPageShow中我们将opacityValue设置为1使组件完全显示。动画的duration参数设置为1500msiterations参数设置为3次播放。动画完成后会触发onFinish方法。
Entry
Component
struct Index {build() {Column(){Blank()Column(){}.height(100%).width(100%).linearGradient({colors: [[#B3CDE3, 0], // 浅蓝色[#7F8FA6, 0.5], // 中等蓝色[#2C3E50, 1] // 深蓝色]})}}
} Entry
Component
struct LaunchPage {build() {Column() {Blank()Column(){Text(探索).fontSize(50).fontColor(Color.White)Text(购物乐趣).fontSize(50).fontColor(Color.White)}}.height(100%).width(100%).linearGradient({colors: [[#B3CDE3, 0], // 浅蓝色[#7F8FA6, 0.5], // 中等蓝色[#2C3E50, 1] // 深蓝色]})}
} 记得把logo图片放在如下目录里面resource文件夹下面
logo图片素材 import router from ohos.router;
Entry
Component
struct Index {State opacityValue: number 0.3;onPageShow(){this.opacityValue 1;}build() {Column(){Blank()Column(){Text(探索).fontSize(50).fontColor(Color.White).fontWeight(FontWeight.Bold)Text(购物乐趣).fontSize(50).fontColor(Color.White).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration: 1500,iterations:3,onFinish: () {router.pushUrl({url: /pages/LaunchPage});}})Blank()Blank()Image($r(app.media.logo)).width(200)}.margin({top:30}).height(100%).width(100%).linearGradient({colors: [[#B3CDE3, 0], // 浅蓝色[#7F8FA6, 0.5], // 中等蓝色[#2C3E50, 1] // 深蓝色]})}}效果图如下 到此我们完成了欢迎界面的布局 接下来我们将实现欢迎界面的闪屏变化效果可以使用属性动画来实现渐变过渡的效果
我们添加一个组件,透明度变化的动画可以使用属性动画来实现渐变过渡的效果,在column组件上添加opacity属性,透明度的变化是一个动态的值,这里我们使用state修饰器声明一个状态变量,状态变量变化会触发UI刷新,默认的透明度设置为0.3,然后在生命周期函数,on page show中设置透明度的值为一让组件完全显示,然后设置animation属性动画的参数duration参数设置动画时长默认值为1000ms,这里我们设置为1500ms,iterations参数设置播放次数默认值播放一次,这里我们设置播放三次,最后添加UNFINISH方法,该方法在动画播放完成时触发 Entry
Component
struct Index {State opacityValue: number 0.3;onPageShow(){this.opacityValue 1;}build() {Column(){Blank()Column(){Text(探索).fontSize(50).fontColor(Color.White).fontWeight(FontWeight.Bold)Text(购物乐趣).fontSize(50).fontColor(Color.White).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration: 1500,iterations:3,onFinish: () {}})Blank()Blank()Image($r(app.media.logo)).width(200)}.height(100%).width(100%).linearGradient({colors: [[#FF8469,0],[ #FC4355,1] ]})}}现在我们在预览界面查看欢迎界面的最终效果
2.引导页实现 接下来我们实现引导页。创建launchPage页面 在index页面导入import router from ohos.router; 引导页的布局采用垂直方向使用Column容器组件并设置宽度和高度。背景同样使用渐变色。
LaunchPage页面
Entry
Component
struct LaunchPage {build() {Column() {}.height(100%).width(100%).linearGradient({colors: [[#B3CDE3, 0], // 浅蓝色[#7F8FA6, 0.5], // 中等蓝色[#2C3E50, 1] // 深蓝色]})}
} 引导页创建好后我们使用页面路由跳转到应用内的指定页面。在欢迎界面中导入路由模块
import router from ohos.router;
并在动画效果结束后调用路由的push url方法配置跳转选项并传入引导页的URL。 引导页的功能包括通过左右滑动切换页面使用Tabs组件实现内容视图的切换。每个页签对应一个TabContent组件。
我们创建了一个banner model对象包含id、title、subtitle和image属性并指定了引导页的数据源。在Tabs组件中我们添加了三个TabContent组件并通过forEach接口基于数组类型数据进行循环渲染。每个TabContent组件中我们创建了一个Column组件设置宽度、高度和内边距并在其中添加了Text和Image组件显示标题、内容和图片。我们还创建了一个页码指示器使用Roll组件渲染页码指示器同样使用forEach执行循环渲染。最后当切换到最后一个页签时显示一个“立即体验”的按钮点击后跳转到商城首页。在Button组件的点击事件中我们调用路由的push url方法传入首页的URL实现跳转。
LaunchPage页面代码如下
import BannerModel from ../models/BannerModel
import { router } from kit.ArkUIEntry
Component
struct LaunchPage {currentIndex: number 0State index: number 0State items: BannerModel[] [{ id:0,title: 甄选推荐,subtitle: 精心挑选为您呈现,image:https://img1.wushang.com/pn/wsec-img1/2021/6/9/d8328eef-8552-4d4e-968c-7030836e46f1.jpg?x-oss-processimage/resize,w_800,h_800,},{ id:1,title: 手机专区,subtitle: 手机特惠区尽享购物惊喜,image: https://img.alicdn.com/i2/1114511827/O1CN018TdXCN1PMoOG25L5Q_!!1114511827.jpg,},{ id:2,title: 电脑专区,subtitle: 电脑特区装备你的数位生活,image: https://tse3-mm.cn.bing.net/th/id/OIP-C.nDvymf_rVmMgx0RnuRbwOQHaGM?rs1pidImgDetMain,}]build() {Column() {Tabs(){ForEach(this.items, (item: BannerModel) {TabContent(){Column() {Text(item.title).fontSize(50).fontColor(Color.White).fontWeight(FontWeight.Bold)Text(item.subtitle).fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)Blank()Image(item.image).width(300).height(300).objectFit(ImageFit.Contain).interpolation(ImageInterpolation.High)Row({ space: 10}){ForEach(this.items,(item:BannerModel) {Rect({width: 10,height: 10}).fill(this.currentIndex item.id ? Color.White : Color.Gray)})}.margin({ top: 30})if (this.currentIndex this.items.length-1) {Button({ type: ButtonType.Capsule }){Text(立即体验).fontColor(Color.White).fontSize(18)}.width(200).height(50).backgroundColor(Color.Transparent).borderWidth(2).borderColor(Color.Black).borderRadius(6).onClick(() {router.pushUrl({url: pages/HomePage})}).margin({ top: 50})}}.width(100%).height(100%).padding({ top: 50,left: 50,right: 50})}})}.width(100%).height(100%).onChange((value: number){this.currentIndex value})}.height(100%).width(100%).linearGradient({colors: [[#B3CDE3, 0], // 浅蓝色[#7F8FA6, 0.5], // 中等蓝色[#2C3E50, 1] // 深蓝色]})}
}LaunchPage页面预览效果图如下所示 3.首页自定义导航栏选项卡
Entry
Component
struct HomePage {State currentIndex:number 0private tabsController: TabsController new TabsController()BuilderTabBuilder(title:string,image:Resource,selectedImage:Resource,tag:number){
Column(){Image(this.currentIndex tag?selectedImage:image).size({width: 40, height: 40}).objectFit(ImageFit.Contain).interpolation(ImageInterpolation.High)Text(title).fontSize(14).fontColor(this.currentIndex tag?Color.Blue:Color.Black)
}.width(100%).height(50).justifyContent(FlexAlign.Center).border({width: {top: 1},color: Color.White}).onClick((){this.currentIndex tagthis.tabsController.changeIndex(this.currentIndex)})}build() {Column(){Tabs({barPosition:BarPosition.End,controller:this.tabsController}){TabContent(){Text(首页)}.tabBar(this.TabBuilder(首页,$r(app.media.home),$r(app.media.home_selected),0))TabContent(){Text(分类)}.tabBar(this.TabBuilder(分类,$r(app.media.sort),$r(app.media.sort_selected),0))TabContent(){Text(购物车)}.tabBar(this.TabBuilder(购物车,$r(app.media.cart),$r(app.media.cart_selected),0))TabContent(){Text(我的)}.tabBar(this.TabBuilder(我的,$r(app.media.my),$r(app.media.my_selected),0))}.width(100%).height(100%).barHeight(80).backgroundColor(Color.White).onChange((index:number){this.currentIndex index})}.width(100%).height(100%)}} 效果如下图所示
