目录
[七、综合实战- 华为登录](#七、综合实战- 华为登录)
前言: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)
}
}