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

相关推荐
智慧化智能化数字化方案1 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY20032 小时前
华为VER系统及CLI命令熟悉
华为
SameX2 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX2 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index10 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室13 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu716 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩16 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
岳不谢18 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr057518 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts