黑马健康——欢迎页面UI实现

 一，前言

        综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

二.应用界面UI

（1）页面UI分析

（2）代码

@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}

@Entry
@Component
struct WelcomePage {
  @State message: string = 'Hello World'

  build() {
    Column({space:10}) {
      //中央slogan
      Row(){
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)
      //logo
      Image($r('app.media.home_logo')).width(150)
      //文字描述
      Row() {
        Text('黑马健康支持').opacityWhiteText(0.8, 12)
        Text('IPv6')
          .opacityWhiteText(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
          .padding({ left: 5, right: 5 })
        Text('网络').opacityWhiteText(0.8, 12)
      }

      Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)
      Text('浙ICP备0000000号-36D')
        .opacityWhiteText(0.4)
        .margin({ bottom: 35 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

（3）运行效果截图

三.总结

这段代码是一个使用了某种框架（可能是Flutter或类似UI构建框架）编写的组件，用于构建一个欢迎页面（WelcomePage）。下面是对代码的逐步解析：

        自定义扩展函数 opacityWhiteText:

这个函数通过装饰器 @Extend(Text) 声明，意味着它是为了扩展 Text 组件的功能。它接收两个参数：opacity 设置文本的不透明度，fontSize 设置文本的字号，默认值为10。函数内部链式调用 .fontSize, .opacity, 和 .fontColor(Color.White) 来设置文本的样式，使其变为白色且具有指定的透明度和字号。

        WelcomePage 组件定义:

使用 @Component 装饰器标记，表示这是一个可复用的UI组件。

@State message: string = 'Hello World' 定义了一个状态变量 message，初始值为 'Hello World'，在实际代码中似乎未被使用，可能是预留或示例性质的。

        build 方法:

构建欢迎页面的布局。主要使用了 Column, Row, Image, 和 Text 等组件来组织界面。

        中央slogan:

仅包含一个图片组件，展示slogan图像，宽度设为260，并通过 .layoutWeight(1) 控制行内布局权重。

        Logo:

单独的图片组件展示应用logo，宽度设为150。

        文字描述:

一个 Row 包含三个 Text 组件，分别显示“黑马健康支持”、“IPv6”（带边框和内边距以突出显示），和“网络”。所有文本都应用了 opacityWhiteText 函数设置样式。

        额外说明性文本:

两段说明性文字，分别解释了“减更多”的含义和展示了备案号，透明度分别设为0.6和0.4，最后一段有底部外边距。

        页面整体样式:

页面宽高均为100%，背景颜色由 $r('app.color.welcome_page_background') 提供，这应该是从资源或主题中引用的背景色值。

        总结，这段代码展示了如何使用组件化的方式构建一个包含图片、文本的欢迎页面，利用自定义扩展方法增强基础组件功能，并通过链式调用来简化样式设置，体现了现代UI开发框架的灵活性和高效性。