鸿蒙系列--组件先容之根本组件
一、通用属性和文本样式针对包罗文本元素的组件（好比：Text、Span、Button、TextInput等），可以设置一些通用的文本样式，好比颜色：fontColor、大小：fontSize、样式：fontStyle、 粗细：fontWeight、字体：fontFamily
https://img-blog.csdnimg.cn/direct/3f72147037fa4b6699b52b11c8de3d08.png
二、Text
文本组件，可以包罗子组件Span
1.根本用法
@Entry
@Component
struct TextPage {
build() {
Row() {
Column() {
Text("默认样式Text组件")
Text("可设置基础文本样式")
.fontColor(Color.Red)
.fontStyle(FontStyle.Italic)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontFamily("Arial，sans-serif")
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/b2d98fae27a741cb8e462fb31c69fc73.png
2.常用属性
textAlign：
@Entry
@Component
struct TextPage {
build() {
Row() {
Column() {
Text("水平对齐尾部")
.width('100%')
.backgroundColor(Color.Yellow)
.textAlign(TextAlign.End)
}
.width('100%')
}
.height('100%')
}
} 设置文本的对齐方式
参数类型为TextAlign，可选类型：
[*]Start：水平对齐首部（默认）
[*]Center：水平居中对齐
[*]End：水平对齐尾部
https://img-blog.csdnimg.cn/direct/019c48e15e8844dea2c50459d4759269.png
maxLines：
用于设置文本显示最大行数。
textOverflow：
设置文本截取方式
.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(1) 当文本内容较多超出了组件范围时，用来设置文本截取方式，需配合maxLines使用，单独设置不见效
参数类型为TextOverflow，可设置类型：
[*]None：无
[*]Clip：直接剪裁
[*]Ellipsis：将显示不下的文本用 “...” 表示
https://img-blog.csdnimg.cn/direct/0a9f6e1718c14d299162f7b0cdf61fbc.png
decoration：
设置文本装饰线样式及其颜色
.decoration({ type: TextDecorationType.Underline, color: Color.Red }) 设置文本装饰线样式，使用TextDecorationType设置，可设置的类型：
[*]None：不使用文本装饰线
[*]Overline：文字上划线修饰
[*]LineThrough：穿过文本的修饰线，中划线
[*]Underline：文字下划线修饰。
使用Color设置本文装饰线颜色
https://img-blog.csdnimg.cn/direct/e06a476842d44b1eae92b7706d62f8ee.png
三、Image
图片组件，可以给Image设置图片所在、宽和高
1.根本用法
@Entry
@Component
struct ImagePage {
build() {
Row() {
Column() {
Image($r("app.media.icon"))
.width(100)
.height(100)
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/20f27e161b7d4c2e88e00b8c0917a6c0.png
2.常用属性
objectFit
设置图片的缩放类型
.objectFit(ImageFit.Contain) https://img-blog.csdnimg.cn/direct/7bd5c7fab310449ab5f576e1c60060d9.png
使用ImageFit设置，可设置类型：
[*]Cover：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。默认
[*]Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
[*]Auto：自适应显示
[*]Fill：不保持宽高比进行放大缩小，使得图片充满显示边界
[*]ScaleDown：保持宽高比显示，图片缩小或者保持稳定
[*]None：保持原有尺寸显示
3.加载网络图片
Image('https://网络图片.jpg') 需要在module.json5文件中阐明网络访问权限
{
"module" : {
"requestPermissions":[
{
"name": "ohos.permission.INTERNET"
}
]
}
} 四、TextInput
输入单行文本
1.根本用法
@Entry
@Component
struct TextInputPage {
build() {
Row() {
Column() {
TextInput()
.fontColor(Color.Blue)
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
.fontFamily('Arial')
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/b8ea745c17d144e589ca02229abd7faa.png
2.设置提示文本：placeholder
@Entry
@Component
struct TextInputPage {
build() {
Row() {
Column() {
TextInput({ placeholder: '请输入账号' })
.placeholderColor(0x999999)
.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
}
.width('100%')
}
.height('100%')
}
}
[*]placeholderColor：设置提示文本的颜色
[*]placeholderFont：设置提示文本的样式，可以设置文本大小size，粗细weight，样式style，字体family
3.设置输入类型：type
type的参数类型为InputType，包罗的输入类型：
[*]Normal：根本输入模式。支持输入数字、字母、下划线、空格、特殊字符
[*]Password：暗码输入模式
[*]Email：e-mail所在输入模式
[*]Number：纯数字输入模式
https://img-blog.csdnimg.cn/direct/b575f02fe76b462081d8f89dad338526.png
4.设置光标位置
使用TextInputController的caretPosition方法
创建一个TextInputController对象，将这个对象设置到TextInput组件中，当点击按钮时，如果输入的字符数满足条件，光标会移动到caretPosition设置的position中
@Entry
@Component
struct TextInputPage {
controller: TextInputController = new TextInputController()
build() {
Row() {
Column() {
TextInput({ controller: this.controller })
.type(InputType.Email)
Button('设置光标位置')
.onClick(() => {
this.controller.caretPosition(2)
})
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/3a6664e9e37e4e639f499e221d8f017f.png
5.获取输入文本
可以给TextInput设置onChange事件，输入文本发生变革时触发回调
@Entry
@Component
struct TextInputPage {
@State text: string = ''
build() {
Row() {
Column() {
TextInput({ placeholder: '请输入账号' })
.onChange((value:string) => {
this.text = value
})
Text(this.text)
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/bd206e57abd44e07817e016f38fb1fb1.png
6.其他属性
caretColor：
修改光标颜色
.caretColor(Color.Red)
五、Button
用来响应点击事件操纵，可以包罗子组件
1.根本用法
实现一个登录按钮
@Entry
@Component
struct ButtonPage {
build() {
Row() {
Column() {
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
.width('90%')
.height(40)
.fontSize(16)
.fontWeight(FontWeight.Medium)
.backgroundColor('#007DFF')
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/49cc885e545f4f91b18546599b1a5c81.png
2.设置按钮样式：type
用ButtonType来设置按钮样式，可设置的类型有：
[*]Capsule：胶囊型按钮（圆角默认为高度的一半）
[*]Circle：圆形按钮
[*]Normal：普通按钮（默认不带圆角）
用stateEffect来设置按钮是否开启切换效果(闪动)，false时，点击效果关闭，默认值为true。
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
3.设置按钮点击事件
用onClick来给按钮绑定点击事件
.onClick(()=>{
// 处理点击事件逻辑
}) 4.设置子组件
@Entry
@Component
struct ButtonPage {
build() {
Row() {
Column() {
Button({ type: ButtonType.Capsule, stateEffect: true }) {
Row() {
Image($r('app.media.icon'))
.width(30)
.height(30)
Text('登录')
.fontSize(20)
.fontColor(Color.White)
}
}
.width('90%')
.height(40)
.backgroundColor(Color.Red)
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/3d78544b55e542efbb17f72327c26b55.png
六、LoadingProgress
进度条组件
可以设置颜色color，和宽width、高height
@Entry
@Component
struct LoadingProgressPage {
build() {
Row() {
Column() {
LoadingProgress()
.color(Color.Blue)
.height(60)
.width(60)
}
.width('100%')
}
.height('100%')
}
} https://img-blog.csdnimg.cn/direct/c7a2db018103478b982a597e4a18c74d.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]