【芙莉莲教你写代码】元服务 DevEco Studio 第四章 基础控件
2024-11-30 20:07:30
23次阅读
0个评论
一、创建文本(Text)
1、直接创建 2、引用Resource资源,资源路径为【/resources/base/element/string.json】
添加子组件
@Component
struct ShowText {
build() {
Column() {
Text("坚果派") {
Span("鸿蒙")
}.fontSize(30)
.margin({ top: 100 })
.border({width:2,style:BorderStyle.Solid,color:Color.Black})
.width('80%')
}
}
}
自定义文本样式
通过textAlign属性设置文本对齐样式。
通过textOverflow属性控制文本超长处理,textOverflow需配合maxLines一起使用(默认情况下文本自动折行)。
通过lineHeight属性设置文本行高。
通过baselineOffset属性设置文本基线的偏移量。
通过letterSpacing属性设置文本字符间距。
通过minFontSize与maxFontSize自适应字体大小,minFontSize设置文本最小显示字号,maxFontSize设置文本最大显示字号,minFontSize与maxFontSize必须搭配同时使用,以及需配合maxline或布局大小限制一起使用,单独设置不生效。
通过copyOption属性设置文本是否可复制粘贴。
@Component
struct ShowText {
build() {
Column() {
Text() {
Span("昼短苦夜长,")
}.textAlign(TextAlign.Center)// Start Center End
.fontSize(50)
.margin({ top: 100 })
.border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
.width('70%')
.textOverflow({ overflow: TextOverflow.None })
.maxLines(1)
.lineHeight(30)
.baselineOffset(0)
.letterSpacing(5)
Text() {
Span("何不秉烛游?")
}
.fontSize(50)
.margin({ top: 100 })
.border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
.width('80%')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.lineHeight(100)
.baselineOffset(50)
.letterSpacing(50)
Text() {
Span("山河远阔,人间星河,无一是你,无一不是你。")
}
.fontSize(30)
.margin({ top: 100 })
.border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
.width('80%')
.textOverflow({ overflow: TextOverflow.MARQUEE })
.maxLines(1)
.baselineOffset(-50)
.letterSpacing(5)
.maxFontSize(50)
.minFontSize(5)
.copyOption(CopyOptions.InApp)
}
}
}
2、文本输入(TextInput/TextArea)
创建输入框
@Component
struct TextInputPage {
build() {
Column() {
TextInput({ placeholder: "请输入昵称", })
.fontSize(28)
.margin({ top: 100 })
.placeholderFont({ size: 28 })
TextArea({ text: "情字何解,怎么落笔都不对!\n 怎奈向,随流水,思念悠长。" })
.width(300)
.margin({ top: 50 })
}
}
}
设置输入框类型
@Component
struct TextInputPage {
build() {
Column() {
TextInput({ placeholder: "请输入昵称", })
.fontSize(28)
.margin({ top: 100 })
.placeholderFont({ size: 28 })
TextInput({ placeholder: "请输入密码", }).type(InputType.Password)
TextInput({ placeholder: "请输入新密码", }).type(InputType.NEW_PASSWORD)
TextInput({ placeholder: "请输入纯数字密码", }).type(InputType.NUMBER_PASSWORD)
TextInput({ placeholder: "请输入数字", }).type(InputType.Number)
TextInput({ placeholder: "请输入π值", }).type(InputType.NUMBER_DECIMAL)
TextInput({ placeholder: "请输入邮箱", }).type(InputType.Email)
TextInput({ placeholder: "请输入手机号", }).type(InputType.PhoneNumber)
TextArea({ text: "情字何解,怎么落笔都不对!\n 怎奈向,随流水,思念悠长。" })
.width(300)
.margin({ top: 50 })
}
}
}
富文本(RichEditor)
@Component
struct RichEditorPage {
controller: RichEditorController = new RichEditorController();
options: RichEditorOptions = { controller: this.controller };
@State show:string="";
build() {
Column() {
RichEditor(this.options)
.onReady(() => {
this.controller.addTextSpan('创建不使用属性字符串构建的 RichEditor 富文本编辑器组件。', {
style: {
fontColor: Color.Black,
fontSize: 15
}
})
})
.border({ width: 2, style: BorderStyle.Solid, color: Color.Black })
.width('100%')
.height('10%')
.margin({ top: 50 })
Button("添加信息").onClick(() => {
this.controller.addTextSpan('新添加一段文字。')
}).width(200)
.height(70)
.margin({ top: 20 })
Button("获取信息").onClick(() => {
this.show = "";
this.show = JSON.stringify(this.controller.getSpans()[0]["value"]);
})
.width(200)
.height(70)
.margin({ top: 20 })
Text(this.show)
}
}
}
图标小符号 (SymbolGlyph/SymbolSpan)
SymbolGlyph是图标小符号组件,便于使用精美的图标,如渲染多色图标。SymbolGlyph通过引用Resource资源来创建,资源引用类型可以通过$r创建Resource类型对象。
@Component
struct SymbolGlyphPage{
build() {
Column(){
Text() {
SymbolSpan($r('sys.symbol.ohos_trash'))
.fontWeight(FontWeight.Normal)
.fontSize(96)
}
Row(){
Text() {
SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
.fontWeight(FontWeight.Normal)
.fontSize(36)
}
Text() {
SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
.fontWeight(FontWeight.Normal)
.fontSize(72)
}
Text() {
SymbolSpan($r('sys.symbol.play_arrow_triangle_2_circlepath'))
.fontWeight(FontWeight.Normal)
.fontSize(96)
}
}
Row(){
Text() {
SymbolSpan($r('sys.symbol.heart_badge_plus'))
.fontWeight(FontWeight.Lighter)
.fontSize(96)
.fontColor([Color.Red])
}
Text() {
SymbolSpan($r('sys.symbol.ellipsis_message_1'))
.fontWeight(FontWeight.Normal)
.fontSize(96)
.fontColor([Color.Yellow])
}
Text() {
SymbolSpan($r('sys.symbol.ohos_wifi'))
.fontWeight(FontWeight.Bold)
.fontSize(96)
.fontColor([Color.Blue])
}
}
}
}
}
5弹窗
模态弹窗
模态(Modal)是UI组件或视图的一种状态。其在消失之前,用户只能对处于模态的组件或视图进行响应,不能操作其他非模态的组件或视图,干扰性比较强。
名称 | 使用场景 |
---|---|
AlertDialog | 通常用来展示用户当前需要或必须关注的信息或操作。如用户操作一个敏感行为时响应一个二次确认的弹窗。 |
ActionSheet | 当需要用户关注或确认的信息存在列表选择时使用。 |
CustomDialog | 当用户需要自定义弹窗内的组件和内容时使用。 |
Popup | 用于为指定的组件做信息提示。如点击一个问号图标弹出一段气泡提示。 |
Menu/ContextMenu | 用于给指定的组件绑定用户可执行的操作,如长按图标展示操作选项等。 |
@Component
struct AlertPage {
@State handlePopup: boolean = false;
build() {
Column({ space: 5 }) {
Button('模态按钮')
.onClick(() => {
AlertDialog.show(
{
title: '弹窗标题',
subtitle: '副标题',
message: '消息文本',
autoCancel: true,
alignment: DialogAlignment.Bottom,
gridCount: 4,
offset: { dx: 0, dy: -20 },
primaryButton: {
value: '取消',
action: () => {
console.info('点击了取消')
}
},
secondaryButton: {
enabled: true,
defaultFocus: true,
style: DialogButtonStyle.HIGHLIGHT,
value: '确定',
action: () => {
console.info('点击了确定')
}
}
}
)
}).backgroundColor(0x317aff)
Button('气泡按钮')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: '这是气泡按钮的显示内容',
placementOnTop: true,
showInSubWindow: false,
primaryButton: {
value: '确认',
action: () => {
this.handlePopup = !this.handlePopup
console.info('点击确认操作')
}
},
// 第二个按钮
secondaryButton: {
value: '取消',
action: () => {
this.handlePopup = !this.handlePopup
console.info('点击取消操作')
}
},
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false
}
}
})
.position({ x: 100, y: 150 })
}.width('100%').margin({ top: 50 })
}
}
按钮
Button有三种可选类型,分别为胶囊类型(Capsule)、圆形按钮(Circle)和普通按钮(Normal),通过type进行设置。
@Component
struct ButtonPage {
build() {
Column() {
Row() {
// 胶囊按钮(默认类型)
Button('默认', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(40)
// 圆形按钮
Button('圆的', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(90)
// 普通按钮
Button('确认', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40)
}.width('100%').height('5%').margin({ top: 100 })
Row() {
// 设置边框弧度。
Button('弧度边框', { type: ButtonType.Normal })
.borderRadius(20)
.height(40)
// 设置文本样式。
Button('字体样式', { type: ButtonType.Normal })
.fontSize(20)
.fontColor(Color.Pink)
.fontWeight(800)
// 设置背景颜色。
Button('背景颜色').backgroundColor(0xF55A42)
}.width('100%').height('5%').margin({ top: 100 })
Row() {
// 图片按钮
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.random_1_1024x1024')).width(30).height(30)
}.width(55).height(55).backgroundColor(0xF55A42)
}.width('100%').height('5%').margin({ top: 100 })
}
}
}
22
- 0回答
- 2粉丝
- 1关注
相关话题
- 【芙莉莲教你写代码】元服务 DevEco Studio 第三章 布局基础
- 【芙莉莲教你写代码】元服务 DevEco Studio 第五章 接口解析
- 【芙莉莲教你写代码】元服务 DevEco Studio 第二章 页面与布局
- 【芙莉莲教你写代码】元服务 DevEco Studio 第一章 环境与示例
- 学习元服务基础—— DevEco Studio
- 【元服务】控件基础(一)
- 基础控件(Text基础配置)
- 基础控件——新闻示例
- 元服务--第一章环境
- 最新 HUAWEI DevEco Studio 调试技巧
- # 最新 HUAWEI DevEco Studio 使用技巧
- 最新 HUAWEI DevEco Studio 使用技巧
- 最新 HUAWEI DevEco Studio 调试技巧
- 元服务——路由基础
- 元服务布局基础