#星计划# #鸿蒙应用开发实战分享#

ZRL

发布于 2023-12-25 16:59

浏览

1收藏

ReadMe:
登录账号：zrl

登录那啥：******

登录成功会跳到详情页面，该页面有个Tab，可滑动切换页签

在详情页面开始时是一个图片，点击图片会以动画的形式展示出该图片的信息。两张图片都是这样的设计

登录失败会跳转到HTTP页面，展示的是名人名言，点击请求网络可以获取新的名人名言

在详情页面上方有两个切换页面的箭头，左边的是返回登录界面，右面的同样可以跳转到HTTP页面,HTTP页面也有一个箭头可以跳转回前一个页面

效果展示：
#星计划# #鸿蒙应用开发实战分享# -鸿蒙开发者社区

#星计划# #鸿蒙应用开发实战分享# -鸿蒙开发者社区

代码展示：

Text文本：

Text('登录')//显示的文本
   .fontSize(50)//大小
   .margin({top:50})//与上一个布局的距离
1.
2.
3.

Image图片:

Image($r('app.media.jianguo'))//显示的图片
     .height(300)//高度
     .width('70%')//宽度
     .position({    //图片所在的位置
      x:this.JGX,
      y:this.JGY
    })
1.
2.
3.
4.
5.
6.
7.

Divider分割线:

Divider()
   .vertical(false) //false水平分布，true垂直分布
   .strokeWidth(4)  //分割线宽度
   .width('100%')
   .margin({top:20})
1.
2.
3.
4.
5.

TextInput文本输入框：

TextInput({
    placeholder:'请输入那啥'   //未写入时展示的文字
 })
   .width('80%')
   .backgroundColor('#ffffff')  //背景色
   .type(InputType.Password)    //输入类型为密码，显示为*
   .showPasswordIcon(false)     //是否显示后面的眼睛
   .onChange((value:string) => {  //输入内容发生变化时，触发该回调
       this.text = value
     })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Tabs页签：

Tabs({barPosition: BarPosition.End,controller: this.tabsController}){
      TabContent(){
        DetailsPage()   //该页签下的页面地址
      }
      .tabBar(this.TabBuilder('坚果',0))  //页签名称和id
1.
2.
3.
4.
5.

Button按钮:

Button('登录')      //按钮名称
  .width('85%')
  .height(50)
  .margin({top:10})
  .linearGradient({   //渐变色
       direction:GradientDirection.Right,  
       colors:[['#ff28dde3',0.0],['#ff532fb8',0.5],['#ffec0adc',1.0]]
     })
   .onClick(() => {   //点击事件，用于文本输入框输入时进行简单的判断
      console.log(this.text)
      if(this.text == '621345' && this.text2 == 'zrl'){
        router.pushUrl({   //路由模块，跳转页面
          url:'pages/TabsPage'  //跳转的页面的路径
       })
      }else {
       router.pushUrl({
         url:'pages/HttpPage'
        })
      }
    })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

Panel可滑动面板：

Panel(this.show){   
   Column(){
     ForEach(this.dataList,(item:dataItem) => {   //展示panel上的内容
        this.listdata(item)
     }
    )
   }
  }
  .type(PanelType.Foldable).mode(PanelMode.Half)  //开启一半
  .dragBar(true)     // 默认开启
  .halfHeight(375)     // 默认一半
  .onClick(() => {
     animateTo({     //添加动画使其出现时更丝滑
     duration: 500,
     curve: Curve.EaseInOut,
     playMode:PlayMode.Normal
     }, () => {
     this.JGY = 170
     this.show = !this.show
     this.showText = 0
    })
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

也有：onClick点击事件，onChange事件，animation动画
HTTP请求 //展示内容为名人名言

aboutToAppear(){
    //请求对象
    let httpReq = http.createHttp()
    //发起请求
    httpReq.request('https://v2.alapi.cn/api/mingyan',{
      method:http.RequestMethod.POST,
      extraData: 'token=h5gA6itRsM8Ii6TN',
    },(err,data) => {
      //处理结果
      if(!err){
        let code: string = JSON.parse(`${data.result}`).code
        console.log(code)
        this.pome = JSON.parse(`${data.result}`).data.content
        console.log(this.pome)
        this.from = JSON.parse(`${data.result}`).data.author
        this.numdata = JSON.parse(`${data.result}`).data.typeid
      }else {
        console.info('nothing')
      }
    })
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.