【鸿蒙】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图标

相关推荐
JavaPub-rodert26 分钟前
鸿蒙生态崛起:开发者的机遇与挑战
华为·harmonyos
yilylong4 小时前
鸿蒙(Harmony)实现滑块验证码
华为·harmonyos·鸿蒙
baby_hua4 小时前
HarmonyOS第一课——DevEco Studio的使用
华为·harmonyos
HarmonyOS_SDK4 小时前
融合虚拟与现实,AR Engine为用户提供沉浸式交互体验
harmonyos
- 羊羊不超越 -6 小时前
App渠道来源追踪方案全面分析(iOS/Android/鸿蒙)
android·ios·harmonyos
长弓三石7 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
SameX9 小时前
鸿蒙 Next 电商应用安全支付与密码保护实践
前端·harmonyos
SuperHeroWu710 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
sanzk15 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna19 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos