【鸿蒙】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 默认400Row(){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图标