第一章：424宿舍新闻app

简介：本项目用搞怪，正式又不失趣味的视角，结合“室委书记”，“正班级干部”，班内同学，宿舍有趣的事情等等，构思耗时已经忘掉了多少时间，构建了一个专为鸿蒙（HarmonyOS）操作系统开发的应用程序，旨在为宿舍成员提供一个集中的平台，用以分享新闻、更新和重要通知。该应用程序由几个关键页面组成，包括首页、新闻列表、新闻详情页以及用户登录界面，共同构成了一个完整的信息交流生态系统

这段代码看起来是使用HarmonyOS的ArkUI框架编写的，这是一个用于开发华为鸿蒙操作系统上的UI界面的框架。代码中定义了一个名为Index的组件，该组件可能是应用的入口页面。以下是对代码的详细解释：

1. 导入模块:

   • 从./Tou导入了一个名为Tou的组件或函数。
   • 从./part_two和./part_three分别导入了part_two和part_three。

2. 装饰器和状态定义:

   • 使用@Entry和@Component装饰器来标记Index为一个组件和应用的入口。
   • @State curIndex:number=0定义了一个状态变量curIndex，初始值为0。这个变量可能用于跟踪当前选中的标签页。

3. 方法定义:

   • buildTabBar(title:string,index:number)方法用于构建标签栏的UI。根据this.curIndex和传入的index值，它会改变文本和分隔线的颜色以及分隔线的可见性。

4. build方法:

   • 定义了Index组件的UI结构。
   • 使用了多个嵌套的Row和Column布局容器来组织内容。
   • 显示了两个图片（可能是应用的头像或其他元素）。
   • 使用Tabs组件来创建标签页，并为每个标签页指定了内容（通过调用Tou(), part_two(), part_three()）和标签栏（通过调用this.buildTabBar()）。
   • 当标签页发生变化时，onChange事件处理器会更新curIndex状态变量。

import {Tou} from './Tou'
2 import {part_two} from'./part_two'
3 import {part_three} from'./part_three'
4 @Entry
5 @Component
6 struct Index {
7 @State curIndex:number=0
8 @Builder buildTabBar(title:string,index:number){
9 Column(){
10 Text(title)
11 .fontSize(16)
12 .fontWeight(500)
13 .fontColor(this.curIndex==index?Color.Black :Color.Gray)
14
15 Divider()
16 .backgroundColor(this.curIndex==index?Color.Red:Color.Black)
17 .width(20)
18 .height(2)
19 .opacity(this.curIndex==index?1:0)
20 .margin(8)
21 }
22 }
23 build() {
24 Row() {
25
26 Column() {
27
28 Row(){
29 Image($r('app.media.head'))
30 .height(40)
31 .margin({left:6})
32 }
33 .width('100%')
34 .justifyContent(FlexAlign.Center)
35
36 Row(){
37 Image($r('app.media.head2'))
38 .height(30)
39 .margin({left:6})
40 }
41 .width('100%')
42 .justifyContent(FlexAlign.Start)
43
44 Tabs(){
45 TabContent(){
46 Tou()
47 }.tabBar(this.buildTabBar('今日头条',0))
48 TabContent(){
49 part_two()
50 }.tabBar(this.buildTabBar('424内娱',1))
51 TabContent(){
52 part_three()
53 }.tabBar(this.buildTabBar('”用户登录“',2))
54 }
55 .layoutWeight(1)
56 .onChange((index:number)=>{
57 this.curIndex=index
58 })
59 }
60 }
61 }
62 }