#星计划#梅科尔工作室HOS-运动指导应用开发原创

梅科尔_WYF

发布于 2024-1-26 23:06

浏览

0收藏

1. 运行环境

应用开发:DevEco Studio版本：DevEco Studio 3.1.1 Release及以上版本
OpenHarmony SDK版本：API 9， OpenHarmony 3.2 Release

2. 项目介绍

本项目是一款创新的运动指导应用，基于OpenHarmony框架开发，致力于为用户提供个性化、科学的运动指导体验。通过现代化的前端开发技术，该应用实现了选项卡切换、界面布局、底部导航栏等主要特性，充分展现了鸿蒙框架的强大功能。

在选项卡切换方面，应用采用TabsController实现，用户可以轻松切换到不同的运动分类，包括主页、个人资料等，便于快速找到符合个人兴趣的运动内容。每个选项卡通过嵌套的Column组件展示与运动相关的内容，如zhu()和jingzuo()，为用户提供了多样化的运动指导选择。

界面布局方面，MyNewsIndex采用了灵活的Flex布局，确保在不同设备上都能够实现良好的自适应效果。这样的设计使用户无论使用何种设备都能够享受到一致的运动指导体验，提升了用户的整体满意度。

底部导航栏直观明了，通过四个不同图标代表主页、消息、我的、我，用户可以方便地了解当前所在页面，提高了应用的易用性。文本和图标的处理通过Text和Image组件实现，清晰显示文字内容和图标，为用户提供直观的视觉体验。

运动指导应用的开发环境基于Hi3861芯片和OpenHarmony框架，保证了应用的高效运行。通过这一创新的运动指导应用，我们为用户打造了一种个性化、科学的运动健康管理方式，展示了鸿蒙框架在运动健康领域的广阔应用前景。

3. 主要开发内容

3.1 开发准备

想要实现以下功能的话，需要学习“Tabs”，“TabContent”，“Row”，“Column”，等等相关技术。
#星计划#梅科尔工作室HOS-运动指导应用开发-鸿蒙开发者社区图3-1 主页

#星计划#梅科尔工作室HOS-运动指导应用开发-鸿蒙开发者社区图3-2 静坐页面
除此之外，还需要先准备8张图标的图片以及应用开发所需要的图片。
图3-3 图片准备

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等，使得页面的布局和样式定义更加方便。这种灵活性使得开发者可以更容易地创建各种复杂的页面布局，同时保持代码的简洁性。

在鸿蒙的整体使用感受上，它展现了其简单、灵活、高效的特点。通过提供丰富的组件和工具，以及清晰的代码结构，使得移动应用开发变得更加愉快和高效。对于作为开发者的我们而言，这样的框架设计有助于加速应用的开发周期，同时为用户提供更加流畅和友好的应用体验。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签