【鸿蒙】HarmonyOS NEXT星河入门到实战3-ArkTS界面起步开发

news2024/11/14 22:30:10

一、界面开发布局思路

二、组件的属性方法

三、字体颜色

四、文字溢出省略号、行高

五、Image图片组件

六、输入框与按钮

七、综合实战- 华为登录

八、设计资源-svg图标

前言：HarmonyOS NEXTArkTS界面开发起步。开发工具:仍然是 DevEco Studio
学习界面开发:build 里面写代码，预览器看效果

一、界面开发布局思路

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';
  // 构建-》界面
  build() {
    // 布局思路：先排版，再内容
    Column(){
    //   内容
      Text('小说简介')
      Row(){
        Text('都市')
        Text('生活')
        Text('情感')
        Text('武侠')
      }
    }
  }
}

二、组件的属性方法

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';
  // 构建-》界面
  build() {
    // 布局思路：先排版，再内容
    Column(){
    //   内容
      Text('小说简介')
        .width('100%')
        .height(40)
        .fontSize(20)
        // .fontWeight(FontWeight.Bold)
        .fontWeight(700) // 100-900的数字 加粗700 默认400
      Row(){
        Text('都市')
          .width(50)
          .height(20)
          .backgroundColor(Color.Orange)
        Text('生活')
          .width(50)
          .height(20)
          .backgroundColor(Color.Pink)
        Text('情感')
          .width(50)
          .height(20)
          .backgroundColor(Color.Yellow)
        Text('武侠')
          .width(50)
          .height(20)
          .backgroundColor(Color.Gray)
      }
      .width('100%')
    }
    .width('100%')

  }
}

三、字体颜色

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {

    Column(){
      Text('春天的菠菜，创造中国神话')
        .width('100%')
        .height(40)
        .fontSize(24)
        // .fontColor(Color.Red)

      Row(){
        Text('置顶   ')  
          .fontColor('#df3c50')
        Text('新华社   ')
          .fontColor('#a1a1a1')
        Text('100000评论   ')
          .fontColor('#a1a1a1')
      }
      .width('100%')
  }
    .width('100%')



  }
}

四、文字溢出省略号、行高

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column(){
      Text('春天的菠菜Harmony开发初体验')
        .width('100%')
        .lineHeight(50) // 行高
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Text('春天的菠菜Harmony开发初体验，学习到了很多的内容，跟着教程走，没有不成功的道理。希望这次能和大家好好分享，同时也希望自己能做出一个实战项目去拓展！！')
        .width('100%')
        .lineHeight(24) //行高
        .textOverflow({
          overflow: TextOverflow.Ellipsis
        })
        // textOverflow必须配合maxlines才有效果
        .maxLines(2)
    }
  }
}

五、Image图片组件

本地存放一个文件：

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column(){
     // 1 网络图片 Image('')
      Image('https://img-home.csdnimg.cn/images/20201124032511.png')
        .height(50)
      Image($r('app.media.bcicon'))
        .width(200)
      Text('春天的菠菜首发！！！')
        .width(200)
      Row(){
        Image($r('app.media.startIcon'))
          .width(20)
        Text(' 大别墅')
      }
      .width(200)

    }

  }
}

六、输入框与按钮

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column({ space: 15}){  // 控制组件间的距离，可以给Column 设置{ space: 10}
      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      })
        .type(InputType.Password)
      Button('登录')
        .width(200)
    }

  }
}

七、综合实战- 华为登录

@Entry
@Component
struct Index {
  @State message: string = '春天的菠菜';

  build() {
    Column({ space: 15}){  // 控制组件间的距离，可以给Column 设置{ space: 10}
      Image($r('app.media.huawei'))
        .height(50)

      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      })
        .type(InputType.Password)
      Button('登录')
        .width(200)
      Row({ space: 15}){
        Text('前往注册')
        Text('忘记密码')
      }

    }
    .width('100%')
    .padding(12)
  }
}