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

目录

一、界面开发布局思路

二、组件的属性方法

三、字体颜色

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

五、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)
  }
}

八、设计资源-svg图标

相关推荐
爱笑的眼睛1138 分钟前
HarmonyOS 应用开发深入浅出:基于 Stage 模型与声明式 UI 的现代化状态管理实践
华为·harmonyos
爱笑的眼睛112 小时前
HarmonyOS 应用开发深度解析:掌握 ArkTS 声明式 UI 与现代化状态管理
华为·harmonyos
爱笑的眼睛112 小时前
HarmonyOS 应用开发深度解析:基于 ArkTS 的跨组件状态管理最佳实践
华为·harmonyos
前端世界2 小时前
鸿蒙系统下的智能设备故障检测实战:从监控到自愈的全流程实现
华为·harmonyos
2501_919749032 小时前
flutter鸿蒙:使用flutter_local_notifications实现本地通知
flutter·华为·harmonyos
Georgewu11 小时前
【HarmonyOS 6】 The target can not be empty. check the build.profile,json5 file of
harmonyos
Georgewu12 小时前
【HarmonyOS 6】Install Failed: error: failed to install bundle.code:9568322
harmonyos
爱笑的眼睛1113 小时前
HarmonyOS 应用开发新范式:深入剖析 Stage 模型与 ArkTS 状态管理
华为·harmonyos
爱笑的眼睛1115 小时前
深入浅出 HarmonyOS ArkUI 3.0:基于声明式开发范式与高级状态管理构建高性能应用
华为·harmonyos
电手16 小时前
时隔4年麒麟重新登场!华为这8.8英寸新「手机」给我看麻了
华为·智能手机