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

相关推荐
ChinaDragonDreamer3 小时前
HarmonyOS:固定样式弹出框
harmonyos·鸿蒙
Devil枫10 小时前
HarmonyOS 广告服务 ArkTS 实现指南:从激励广告到多形式适配
华为·harmonyos
猫林老师13 小时前
HarmonyOS 5 性能优化全攻略:从启动加速到内存管理
华为·性能优化·harmonyos
GIS小小研究僧14 小时前
华为电脑 银河麒麟系统 使用CrossOver安装微软Office2016
华为·电脑·银河麒麟
猫林老师15 小时前
HarmonyOS 5 手势系统与高级交互动效开发实战
华为·交互·harmonyos
chensi_0715 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
搬砖的小码农_Sky18 小时前
鸿蒙(HarmonyOS)应用开发技能栈
harmonyos·鸿蒙系统
D.....l19 小时前
Hi3861 OpenHarmony鸿蒙开发(嵌入式方向) (一)
华为·harmonyos
代码79721 天前
【无标题】使用 Playwright 实现跨 Chromium、Firefox、WebKit 浏览器自动化操作
运维·前端·深度学习·华为·自动化
yenggd1 天前
华为bgp路由的各种控制和团体属性及orf使用案例
网络·华为