项目7-七彩天气app任务7.4“我的”页面

最新推荐文章于 2025-12-15 16:38:44 发布

原创最新推荐文章于 2025-12-15 16:38:44 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

此分解任务最终的结果如下：

其中用到的IndexPersonalPage.ets如下：

// IndexPersonalPage.ets
import { i18n } from '@kit.LocalizationKit'
import { STATUS_BAR_HEIGHT } from '../../entryability/EntryAbility';

@Preview
@Component
export struct IndexPersonalPage {
  // 使用@Builder 显示个人数据
  @Builder
  datashow(name: Resource, value: number) {
    Column() {
      Text(value.toString()).fontColor($r('app.color.gray3')).fontSize(20)
      Blank().height(10)
      Text(name).fontColor($r('app.color.gray7')).fontSize(16)
    }

  }

  // 功能条
  @Builder
  functionalBar(icon: Resource, title: Resource, click: (event: ClickEvent) => void) {
    Column() {
      Row() {
        Image(icon).width(30)
        Text(title).margin({ left: 20 }).fontSize(16)
        Blank()
        SymbolGlyph($r('sys.symbol.chevron_right')).fontSize(26)
      }.width('100%').height(60)
      .padding({ left: 20, right: 20 })

      Divider().width('100%').margin({ left: 20 })
    }.backgroundColor(Color.White)
    .onClick(click)
    .stateStyles({
      normal: {
        .backgroundColor(Color.White)
      },
      clicked: {
        .backgroundColor($r('app.color.grayE'))
      }
    })
  }

  build() {
    Scroll() {
      Column() {
        Column() {
          // 头像
          Image($r('app.media.avatar_male'))
            .width(70).borderRadius(35)
            .margin({ top: STATUS_BAR_HEIGHT })

          // 名称
          Text('华为用户').margin({ top: 15 }).fontSize(20).fontWeight(500)
          // 3个数据
          Row() {
            this.datashow($r('app.string.personal_follow'), 0)
            this.datashow($r('app.string.personal_fans'), 0)
            this.datashow($r('app.string.personal_praise'), 0)
          }
          .margin({ top: 15 })
          .width('100%')
          .justifyContent(FlexAlign.SpaceAround)
        }.backgroundImage($r('app.media.bg_personal_head'))
        .backgroundImageSize(ImageSize.FILL)
        .width('100%').height(230)

        this.functionalBar($r("app.media.ic_func_language"), $r('app.string.personal_language'), () => {
          console.log('语言', i18n.System.getAppPreferredLanguage())
          // 简体中文和美国英文切换
          if (i18n.System.getAppPreferredLanguage() != 'zh-Hans') {
            i18n.System.setAppPreferredLanguage('zh-Hans')
          } else {
            i18n.System.setAppPreferredLanguage('en-US')
          }
        })

        this.functionalBar($r('app.media.ic_func_feedback'), $r('app.string.personal_feedback'), () => {

        })

        this.functionalBar($r('app.media.ic_func_about'), $r('app.string.personal_about'), () => {

        })
      }
    }
  }
}

// 展示个人数据组件
@Component
struct DataShow {
  title?: Resource
  // 父向子单向同步
  @Prop content: number

  build() {
    Column() {
      Text(this.content + '')
        .fontColor($r('app.color.gray3')).fontSize(20)
        .onClick(() => {
          this.content++
        })
      Blank().height(10)
      Text(this.title ?? '')
        .fontColor($r('app.color.gray7')).fontSize(16)
    }
  }
}

resources下新建的zh_CN文件夹下的string.json如下

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "七彩天气"
    },
    {
      "name": "splash_skip",
      "value": "秒 跳过"
    },
    {
      "name": "index_nav_text1",
      "value": "天气"
    },
    {
      "name": "index_nav_text2",
      "value": "新闻"
    },
    {
      "name": "index_nav_text3",
      "value": "我的"
    },
    {
      "name": "personal_follow",
      "value": "关注"
    },
    {
      "name": "personal_fans",
      "value": "粉丝"
    },
    {
      "name": "personal_praise",
      "value": "点赞"
    },
    {
      "name": "personal_language",
      "value": "语言"
    },
    {
      "name": "personal_feedback",
      "value": "反馈"
    },
    {
      "name": "personal_about",
      "value": "关于"
    },
    {
      "name": "tip_login_first",
      "value": "请先登录~"
    },
    {
      "name": "pt_login",
      "value": "登录"
    },
    {
      "name": "tip_username",
      "value": "用户名"
    },
    {
      "name": "tip_password",
      "value": "密码"
    },
    {
      "name": "btn_sign_in",
      "value": "登  录"
    },
    {
      "name": "about_title",
      "value": "关于七彩天气"
    },
    {
      "name": "about_content",
      "value": "当前版本v%s。\n该APP基于HarmonyOS Next版本开发，天气数据来自于高德天气API。该APP所有源代码及其它资源仅限学习交流使用，不可用作商业用途。"
    },
    {
      "name": "btn_sure",
      "value": "确定"
    },
    {
      "name": "btn_sign_up",
      "value": "注册"
    },
    {
      "name": "btn_forget_pwd",
      "value": "忘记密码"
    },
    {
      "name": "login_error_username_or_password",
      "value": "用户名或密码错误"
    },
    {
      "name": "username_password_empty",
      "value": "用户名或密码不能为空"
    },
    {
      "name": "btn_logout",
      "value": "退出登录"
    },
    {
      "name": "btn_save_info",
      "value": "保存信息"
    },
    {
      "name": "logout_tip",
      "value": "您确定要退出登录吗？"
    },
    {
      "name": "confirm_title",
      "value": "确认"
    },
    {
      "name": "btn_cancel",
      "value": "取消"
    },
    {
      "name": "location_permission",
      "value": "允许应用在定位场景中在前台运行时获取位置信息"
    },
    {
      "name": "fuzzy_location_permission",
      "value": "允许应用在定位场景中获取模糊的设备位置信息"
    }
  ]
}

resources下新建的en_US文件夹下的string.json如下

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "QiCai Weather"
    },
    {
      "name": "splash_skip",
      "value": "S Skip"
    },
    {
      "name": "index_nav_text1",
      "value": "Forecast"
    },
    {
      "name": "index_nav_text2",
      "value": "News"
    },
    {
      "name": "index_nav_text3",
      "value": "Me"
    },
    {
      "name": "personal_follow",
      "value": "Follow"
    },
    {
      "name": "personal_fans",
      "value": "Fans"
    },
    {
      "name": "personal_praise",
      "value": "Praise"
    },
    {
      "name": "personal_language",
      "value": "Language"
    },
    {
      "name": "personal_feedback",
      "value": "Feedback"
    },
    {
      "name": "personal_about",
      "value": "About"
    },
    {
      "name": "tip_login_first",
      "value": "Please login first~"
    },
    {
      "name": "pt_login",
      "value": "Login"
    },
    {
      "name": "tip_username",
      "value": "Username"
    },
    {
      "name": "tip_password",
      "value": "Password"
    },
    {
      "name": "btn_sign_in",
      "value": "Sign  In"
    },
    {
      "name": "about_title",
      "value": "About"
    },
    {
      "name": "about_content",
      "value": "Current version is v%s. \nThis app is developed based on HarmonyOS Next version, and the weather data comes from the Amap Weather API. All source code and other resources of this app are for learning and communication purposes only and cannot be used for commercial purposes."
    },
    {
      "name": "btn_sure",
      "value": "Confirm"
    },
    {
      "name": "btn_sign_up",
      "value": "Sign Up"
    },
    {
      "name": "btn_forget_pwd",
      "value": "Forget Password"
    },
    {
      "name": "login_error_username_or_password",
      "value": "Incorrect username or password."
    },
    {
      "name": "username_password_empty",
      "value": "Both username and password must be filled."
    },
    {
      "name": "btn_logout",
      "value": "Log Out"
    },
    {
      "name": "btn_save_info",
      "value": "Save"
    },
    {
      "name": "logout_tip",
      "value": "Are you sure to log out?"
    },
    {
      "name": "confirm_title",
      "value": "Confirm"
    },
    {
      "name": "btn_cancel",
      "value": "Cancel"
    },
    {
      "name": "location_permission",
      "value": "Allow the app to obtain location information when running in the foreground during location scenarios"
    },
    {
      "name": "fuzzy_location_permission",
      "value": "Allow the app to obtain fuzzy device location information during location scenarios"
    }
  ]
}