【中工开发者】鸿蒙应用 图书管理系统

“本学期学习了鸿蒙开发课程，想通过一个小项目检验一下自己所学，下面把该项目总结一下，为学习开发鸿蒙的小伙伴提供一些参考。

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct Login {
5.   @State userName:string =''
6.   @State password:string = ''
9.   build() {
10.     Column() {
11.       Text('图书管理系统').margin({ top: 30 }).fontSize(40)
12.       Image($r('app.media.icon'))
13.         .height(100).width(100)
14.         .margin({ top: 100 })
15.       TextInput().width("80%").height(50).margin(10)
16.         .onChange((value) =>{
17.           this.userName =value
18.         })
19.       TextInput().width("80%").height(50).margin(10)
20.         .type(InputType.Password)
21.         .onChange((value01) =>{
22.           this.password =value01
23.         })
24.       Button("登录").onClick(() => {
25.         if(this.userName == '001' && this.password == '123'){
26.           router.pushUrl({ url: 'pages/Main' })
27.         }else{
28.           this.userName = ''
29.           this.password = ''
30.         }
34.       })
35.         .width("60%")
36.         .height(50)
37.         .margin(20)
41.       Button("注册").onClick(() => {
42.         router.pushUrl({ url: 'pages/Register' })
43.       })
44.         .width("60%")
45.         .height(50)
46.         .margin(20)
51.     }.height("100%")
52.     .width("100%")
53.   }
54. }

复制代码

这行代码导入了OpenHarmony的路由模块，使得组件可以跳转到其他页面。
@Entry：表示这个组件是一个页面的入口点。
@Component：标志这个类是一个ArkUI组件。
@State userName: string = ''：界说了一个名为userName的状态变量，用于存储用户名，初始值为空字符串。
@State password: string = ''：界说了一个名为password的状态变量，用于存储密码，初始值为空字符串。
Column()：创建一个垂直布局容器。
Text('图书管理系统')：显示文本“图书管理系统”。
Image($r('app.media.icon'))：显示一个图片，图片资源通过$r函数引用。
TextInput()：创建两个文本输入框，分别用于输入用户名和密码。用户名输入框绑定到userName状态，密码输入框绑定到password状态。
Button("登录")：创建一个登录按钮，点击时查抄用户名和密码是否正确（这里硬编码为'001'和'123'），假如正确则跳转到pages/Main页面，否则清空用户名和密码。
Button("注册")：创建一个注册按钮，点击时跳转到pages/Register页面。
这段代码实现了一个简朴的登录界面，用户可以输入用户名和密码进行登录，或者点击注册按钮跳转到注册页面。登录乐成后，会跳转到主页面。

这个页面就是应用的home界面
使用private swiperController: SwiperController = new SwiperController()：创建了一个SwiperController实例，用于控制轮播图的举动。SwiperController是ArkUI提供的一个系统类，用于实现轮播图的切换等功能。
轮播图内包含三个Text组件，每个Text组件都设置了背景图片（通过$r函数引用资源），并显示了文本“轮播图1”、“轮播图2”和“轮播图3”。这些文本被居中显示，并设置了字体大小。
代码如下：

1. @Entry
2. @Component
3. struct Main {
4.   @State content: string = ""
5.   //创建轮播实例对象--SwiperController系统函数
6.   private swiperController: SwiperController = new SwiperController()
8.   build() {
9.     Column() {
10.       Swiper(this.swiperController) {
11.         Text("轮播图1")
12.           .width('98%')
13.           .height(150)
14.           .backgroundImage($r('app.media.b1'))
15.           .backgroundImageSize({"width":"100%","height":"100%"})
16.           .textAlign(TextAlign.Center)
17.           .fontSize(30)
19.         Text("轮播图2")
20.           .width('98%')
21.           .height(150)
22.           .backgroundImage($r('app.media.b2'))
23.           .backgroundImageSize({"width":"100%","height":"100%"})
24.           .textAlign(TextAlign.Center)
25.           .fontSize(30)
27.         Text("轮播图3")
28.           .width('98%')
29.           .height(150)
30.           .backgroundImage($r('app.media.b3'))
31.           .backgroundImageSize({"width":"100%","height":"100%"})
32.           .textAlign(TextAlign.Center)
33.           .fontSize(30)
34.       }
35.       .loop(true)
36.       .autoPlay(true)
37.       .interval(3000)
38.       .indicatorStyle({
39.         size: 80,
40.         left: 300,
41.         color: Color.Red
42.       }).align(Alignment.Center)
44.     }.height('100%').width('100%').alignItems(HorizontalAlign.Center)
46.   }
47. }

复制代码

这个界面可以进行简朴的动画介绍册本
@State videoSrc: Resource = $rawfile('test.mp4')：界说了一个状态变量videoSrc，用于存储视频文件的资源路径。这里使用了$rawfile函数来引用原始文件目录下的test.mp4视频文件。
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X：界说了一个状态变量curRate，用于控制视频的播放速度。初始值设置为正常速度（1倍速）。
@State showControls: boolean = true：界说了一个状态变量showControls，用于控制是否显示视频控制栏（如播放/暂停按钮、进度条等）。初始值设置为true，即显示控制栏。
@State isAutoPlay: boolean = false：界说了一个状态变量isAutoPlay，用于控制视频是否主动播放。初始值设置为false，即不主动播放。
视频播放组件支持多种事件回调，如开始播放、暂停、播放竣事、出错、预备完成、正在跳转、跳转完成和更新等，用户可以通过这些回调来执行相应的逻辑处理。
代码如下：

1. @Entry
2. @Component
3. struct VideoCreateComponent {
4.   @State videoSrc: Resource = $rawfile('test.mp4')  // 视频源
5.   @State previewUri: Resource = $r('app.media.pp1') // 预览图片
6.   @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X // 播放速度
7.   @State isAutoPlay: boolean = false // 不自动播放
8.   @State showControls: boolean = true // 显示控制栏
9.   controller: VideoController = new VideoController()  // 视频控制器
11.   build() {
12.     Column() {
13.       Video({ // Video组件
14.         src: this.videoSrc,
15.         previewUri: this.previewUri,
16.         currentProgressRate: this.curRate,
17.         controller: this.controller
18.       }).width("100%").height("66%")
19.         .autoPlay(this.isAutoPlay)
20.         .controls(this.showControls)
21.         .onStart(() => {
22.           console.info('onStart')
23.         })
24.         .onPause(() => {
25.           console.info('onPause')
26.         })
27.         .onFinish(() => {
28.           console.info('onFinish')
29.         })
30.         .onError(() => {
31.           console.info('onFinish')
32.         })
33.         .onPrepared((e) => {
34.           console.info('onPrepared is ' + e.duration)
35.         })
36.         .onSeeking((e) => {
37.           console.info('onSeeking is ' + e.time)
38.         })
39.         .onSeeked((e) => {
40.           console.info('onSeeked is ' + e.time)
41.         })
42.         .onUpdate((e) => {
43.           console.info('onUpdate is ' + e.time)
44.         })
46.       Row() {
47.         Button('开始').onClick(() => {
48.           this.controller.start() // 开始播放
49.         }).margin(5)
50.         Button('暂停').onClick(() => {
51.           this.controller.pause() // 暂停播放
52.         }).margin(5)
53.         Button('停止').onClick(() => {
54.           this.controller.stop() // 结束播放
55.         }).margin(5)
56.         Button('跳到60秒').onClick(() => {
57.           this.controller.setCurrentTime(60, SeekMode.Accurate) // 精准跳转到视频的60s位置
58.         }).margin(5)
59.       }
61.       Row() {
62.         Button('0.75倍速').onClick(() => {
63.           this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
64.         }).margin(5)
65.         Button('1倍数').onClick(() => {
66.           this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
67.         }).margin(5)
68.         Button('2倍数').onClick(() => {
69.           this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
70.         }).margin(5)
71.       }
72.     }.alignItems(HorizontalAlign.Center).padding({ left: 5, right: 5 })
73.   }
74. }

复制代码

其他界面不再赘述，以下是一些界面截图：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。