鸿蒙开发实战-运动app开发_鸿蒙app开发

主要开发内容

3.1 开发准备

想要实现以下功能的话，需要学习“Tabs”，“TabContent”，“Row”，“Column”，等等相关技术。

主页

静坐页面
  除此之外，还需要先准备8张图标的图片以及应用开发所需要的图片。

3.2 tabs功能实现

应用中的Tabs功能通过采用了TabsController来实现。TabsController是一个在鸿蒙开发框架中用于管理Tabs的控制器，它负责处理Tabs之间的切换逻辑。以下是实现Tabs功能的关键代码部分：

// 定义TabsController实例
private controller: TabsController = new TabsController()
// ...
// 在build方法中使用Tabs组件，并传入controller
build() {
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    Tabs({ controller: this.controller }) {
      // ...（省略Tabs中的内容）
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

在上述代码中，通过创建一个TabsController实例并赋值给controller成员变量，将该控制器传递给Tabs组件。Tabs组件会根据传入的控制器进行管理，从而实现Tabs之间的切换。

关于TabsController的具体使用，我们可以看到定义了多个方法，如IndexClick、messageClick、myClick和meClick等。这些方法分别用于处理不同Tabs的点击事件，并在点击时调用controller.changeIndex(index)来切换到对应的Tabs。通过TabsController的管理和控制，实现了在MyNewsIndex应用中不同Tabs之间的切换效果。用户点击不同的Tabs时，调用相应的方法切换到对应的内容，从而提供了用户友好的导航和浏览体验。Tabs功能的实现使得用户可以方便地切换到不同的运动分类或内容页面，增强了应用的可用性。

@Entry
@Component
struct MyNewsIndex {
  private controller: TabsController = new TabsController()
  @State SelectPos:number=0;
  public IndexClick(){
    this.SelectPos=0;
    this.controller.changeIndex(0)
  }
  public messageClick(){
    this.SelectPos=1;
    this.controller.changeIndex(1)
  }
  public myClick(){
    this.SelectPos=2;
    this.controller.changeIndex(2)
  }
  public meClick(){
    this.SelectPos=3;
    this.controller.changeIndex(3)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Column() {
            zhu()
          }

        }
        .tabBar()
        TabContent() {
          Column() {
            jingzuo()
          }

        }
        .tabBar()
        TabContent() {
          Text("我men的")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(0X6495ED)
        }
        .tabBar()
        TabContent() {
          Text("我")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Black)

        }
        .tabBar()
      }
      .scrollable(false)
      .barHeight(0)
      .animationDuration(0)
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

3.3 底部导航栏

通过Row和Column以及Text，Image等组件，实现了底部的导航栏。四个不同的图标分别代表主页、消息、我的、我，通过点击不同图标，用户可以快速切换到对应的页面，提升用户友好性。以下是参考代码：

 Row() {
        Column(){
          Image((this.SelectPos==0?$r('app.media.yundong1'):$r('app.media.yundong')))
            .width(30)
            .height(30)
            .margin(12)

        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.IndexClick.bind(this))

        Column(){
          Image((this.SelectPos==1?$r('app.media.gangling1'):$r("app.media.gangling")))
            .width(35)
            .height(30)
            .margin(12)

        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.messageClick.bind(this))

        Column(){
          Image((this.SelectPos==2?$r('app.media.zhidao1'):$r('app.media.zhidao')))
            .width(30)
            .height(30)
            .margin(12)

        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.myClick.bind(this))

        Column(){
          Image((this.SelectPos==3?$r('app.media.me1'):$r('app.media.me')))
            .width(30)
            .height(30)
            .margin(12)
        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.meClick.bind(this))
      }
      .alignItems(VerticalAlign.Bottom)
      .width('100%')
      .height(50)
      .margin({top:0,right:0,bottom:10,left:0})
    }
    .width('100%')
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

4. 总结

本项目使用鸿蒙框架的代码结构清晰且容易理解。通过引入页面组件（zhu和jingzuo）以及使用装饰器（@Entry和@Component）来定义组件，代码使得组件的结构和布局一目了然，用户可以轻松切换到不同的运动分类，包括主页、精选等，还提供了用户友好的界面导航，使用户能够快速找到符合个人兴趣的运动内容，除此之外，本项目通过鸿蒙采用了灵活的Flex布局，确保在不同设备上都能够实现良好的自适应效果。

其次，鸿蒙框架提供了一系列的布局和样式管理工具，如Flex、Column、Tabs等，使得页面的布局和样式定义更加方便。这种灵活性使得开发者可以更容易地创建各种复杂的页面布局，同时保持代码的简洁性。