鸿蒙系列--组件先容之根本组件

一、通用属性和文本样式 

        针对包罗文本元素的组件（好比：Text、Span、Button、TextInput等），可以设置一些通用的文本样式，好比颜色：fontColor、大小：fontSize、样式：fontStyle、 粗细：fontWeight、字体：fontFamily

二、Text

文本组件，可以包罗子组件Span
1.根本用法

1. @Entry
2. @Component
3. struct TextPage {
4.   build() {
5.     Row() {
6.       Column() {
7.         Text("默认样式Text组件")
8.         Text("可设置基础文本样式")
9.           .fontColor(Color.Red)
10.           .fontStyle(FontStyle.Italic)
11.           .fontSize(30)
12.           .fontWeight(FontWeight.Bold)
13.           .fontFamily("Arial，sans-serif")
14.       }
15.       .width('100%')
16.     }
17.     .height('100%')
18.   }
19. }

复制代码

2.常用属性

textAlign：

1. @Entry
2. @Component
3. struct TextPage {
5.   build() {
6.     Row() {
7.       Column() {
8.         Text("水平对齐尾部")
9.           .width('100%')
10.           .backgroundColor(Color.Yellow)
11.           .textAlign(TextAlign.End)
12.       }
13.       .width('100%')
14.     }
15.     .height('100%')
16.   }
17. }

复制代码

        设置文本的对齐方式
参数类型为TextAlign，可选类型：

• Start：水平对齐首部（默认）
  
• Center：水平居中对齐
  
• End：水平对齐尾部
  

maxLines：

        用于设置文本显示最大行数。
textOverflow：

        设置文本截取方式

1.     .textOverflow({overflow:TextOverflow.Ellipsis})
2.     .maxLines(1)

复制代码

        当文本内容较多超出了组件范围时，用来设置文本截取方式，需配合maxLines使用，单独设置不见效
参数类型为TextOverflow，可设置类型：

• None：无
  
• Clip：直接剪裁
  
• Ellipsis：将显示不下的文本用 “...” 表示
  

decoration：

        设置文本装饰线样式及其颜色

1. .decoration({ type: TextDecorationType.Underline, color: Color.Red })

复制代码

设置文本装饰线样式，使用TextDecorationType设置，可设置的类型：

• None：不使用文本装饰线
  
• Overline：文字上划线修饰
  
• LineThrough：穿过文本的修饰线，中划线
  
• Underline：文字下划线修饰。
  

使用Color设置本文装饰线颜色

三、Image

图片组件，可以给Image设置图片所在、宽和高
1.根本用法

1. @Entry
2. @Component
3. struct ImagePage {
5.   build() {
6.     Row() {
7.       Column() {
8.         Image($r("app.media.icon"))
9.           .width(100)
10.           .height(100)
11.       }
12.       .width('100%')
13.     }
14.     .height('100%')
15.   }
16. }

复制代码

2.常用属性

objectFit

        设置图片的缩放类型

1.     .objectFit(ImageFit.Contain)

复制代码

使用ImageFit设置，可设置类型：

• Cover：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。默认
  
• Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
  
• Auto：自适应显示
  
• Fill：不保持宽高比进行放大缩小，使得图片充满显示边界
  
• ScaleDown：保持宽高比显示，图片缩小或者保持稳定
  
• None：保持原有尺寸显示
  

3.加载网络图片

1. Image('https://网络图片.jpg')

复制代码

        需要在module.json5文件中阐明网络访问权限

1. {
2.     "module" : {
3.         "requestPermissions":[
4.            {
5.              "name": "ohos.permission.INTERNET"
6.            }
7.         ]
8.     }
9. }

复制代码

四、TextInput

输入单行文本
1.根本用法

1. @Entry
2. @Component
3. struct TextInputPage {
5.   build() {
6.     Row() {
7.       Column() {
8.         TextInput()
9.           .fontColor(Color.Blue)
10.           .fontSize(20)
11.           .fontStyle(FontStyle.Italic)
12.           .fontWeight(FontWeight.Bold)
13.           .fontFamily('Arial')
14.       }
15.       .width('100%')
16.     }
17.     .height('100%')
18.   }
19. }

复制代码

2.设置提示文本：placeholder      

1. @Entry
2. @Component
3. struct TextInputPage {
4.   build() {
5.     Row() {
6.       Column() {
7.         TextInput({ placeholder: '请输入账号' })
8.           .placeholderColor(0x999999)
9.           .placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
10.       }
11.       .width('100%')
12.     }
13.     .height('100%')
14.   }
15. }

复制代码

• placeholderColor：设置提示文本的颜色
  
• placeholderFont：设置提示文本的样式，可以设置文本大小size，粗细weight，样式style，字体family
  

3.设置输入类型：type

        type的参数类型为InputType，包罗的输入类型：

• Normal：根本输入模式。支持输入数字、字母、下划线、空格、特殊字符
  
• Password：暗码输入模式
  
• Email：e-mail所在输入模式
  
• Number：纯数字输入模式
  

4.设置光标位置

        使用TextInputController的caretPosition方法
创建一个TextInputController对象，将这个对象设置到TextInput组件中，当点击按钮时，如果输入的字符数满足条件，光标会移动到caretPosition设置的position中

1. @Entry
2. @Component
3. struct TextInputPage {
4.   controller: TextInputController = new TextInputController()
6.   build() {
7.     Row() {
8.       Column() {
9.         TextInput({ controller: this.controller })
10.           .type(InputType.Email)
12.         Button('设置光标位置')
13.           .onClick(() => {
14.             this.controller.caretPosition(2)
15.           })
16.       }
17.       .width('100%')
18.     }
19.     .height('100%')
20.   }
21. }

复制代码

5.获取输入文本

可以给TextInput设置onChange事件，输入文本发生变革时触发回调

1. @Entry
2. @Component
3. struct TextInputPage {
4.   @State text: string = ''
6.   build() {
7.     Row() {
8.       Column() {
9.         TextInput({ placeholder: '请输入账号' })
10.           .onChange((value:string) => {
11.             this.text = value
12.           })
14.         Text(this.text)
15.       }
16.       .width('100%')
17.     }
18.     .height('100%')
19.   }
20. }

复制代码

6.其他属性

caretColor：

修改光标颜色

1.     .caretColor(Color.Red)

复制代码

五、Button

用来响应点击事件操纵，可以包罗子组件
1.根本用法

实现一个登录按钮

1. @Entry
2. @Component
3. struct ButtonPage {
5.   build() {
6.     Row() {
7.       Column() {
8.         Button('登录', { type: ButtonType.Capsule, stateEffect: true })
10.           .width('90%')
11.           .height(40)
12.           .fontSize(16)
13.           .fontWeight(FontWeight.Medium)
14.           .backgroundColor('#007DFF')
15.       }
16.       .width('100%')
17.     }
18.     .height('100%')
19.   }
20. }

复制代码

2.设置按钮样式：type

用ButtonType来设置按钮样式，可设置的类型有：

• Capsule：胶囊型按钮（圆角默认为高度的一半）
  
• Circle：圆形按钮
  
• Normal：普通按钮（默认不带圆角）
  

用stateEffect来设置按钮是否开启切换效果(闪动)，false时，点击效果关闭，默认值为true。

1.     Button('登录', { type: ButtonType.Capsule, stateEffect: true })

复制代码

3.设置按钮点击事件

用onClick来给按钮绑定点击事件

1.       .onClick(()=>{
2.             // 处理点击事件逻辑
3.        })

复制代码

4.设置子组件

1. @Entry
2. @Component
3. struct ButtonPage {
4.   build() {
5.     Row() {
6.       Column() {
7.         Button({ type: ButtonType.Capsule, stateEffect: true }) {
8.           Row() {
9.             Image($r('app.media.icon'))
10.               .width(30)
11.               .height(30)
13.             Text('登录')
14.               .fontSize(20)
15.               .fontColor(Color.White)
16.           }
17.         }
18.         .width('90%')
19.         .height(40)
20.         .backgroundColor(Color.Red)
21.       }
22.       .width('100%')
23.     }
24.     .height('100%')
25.   }
26. }

复制代码

六、LoadingProgress

进度条组件
可以设置颜色color，和宽width、高height        

1. @Entry
2. @Component
3. struct LoadingProgressPage {
5.   build() {
6.     Row() {
7.       Column() {
8.         LoadingProgress()
9.           .color(Color.Blue)
10.           .height(60)
11.           .width(60)
12.       }
13.       .width('100%')
14.     }
15.     .height('100%')
16.   }
17. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。