上篇回顾 ArkTS开发系列之UI布局用法的学习认识（2.2.2下）
本篇内容 对一些常用基础组件的使用学习
一、知识储备
1. 按钮（Button）
- 有两种创建形式
- 不包含子组件
Button('无子组件') .type(ButtonType.Capsule) //设置按钮类型 .stateEffect(true) .backgroundColor(Color.Orange)- 包含子组件
Button({ type: ButtonType.Normal, stateEffect: true }) { Row() { Image($r('app.media.app_icon')).width(30).height(30).margin({ left: 12 }) Text('logo，有子组件') .fontSize(44).fontColor(Color.Green).margin({ left: 10, right: 10 }) //设置文本样式 }.alignItems(VerticalAlign.Center) } .borderRadius(9) //设置按钮圆角 .backgroundColor(0x00c250).height(40) ```
2. 单选框（Radio）
- 创建方式
Radio({ value: 'no', group: 'isRight' }) .checked(false)
3. 切换按钮（Toggle）
-
创建方式有两种
- 无子组件
Toggle({type: ToggleType.Switch,isOn: false}) Toggle({type: ToggleType.Checkbox,isOn: false})- 包含子组件
Toggle({ type: ToggleType.Button, isOn: true }) { Text('status')//有子组件的创建方式 .fontColor(Color.Red) }.width('80') .selectedColor(Color.Yellow)//自定义背景颜色 .onChange(isOn=>{ if (isOn) { promptAction.showToast({message: '我被选中了'}) } })
4. 进度条（Progress）
- 创建方式
Progress({value: 24, total: 100, type: ProgressType.Linear})
5. 文本显示（Text/Span）
- 创建方式
Text('我是文本'){ Span('我是Span文本') } Text($r('app.string.app_name')) .baselineOffset(0) .fontSize(44) .fontColor(Color.Pink) .border({ width: 1 }) .padding(10) .width(300)
6. 输入框（TextInput/TextArea）
- 创建方式
TextArea()//多选输入框 TextInput()//单选输入框
7. 自定义弹窗（CustomDialog）
- 定义弹窗
@CustomDialog struct MyDialog { controller: CustomDialogController; cancel: () => void; confirm: () => void; build() { Column() { Text('确认提交吗') .fontSize(44) .margin(10) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('取消').onClick(() => { this.controller.close() this.cancel }) .margin(10) Button('确定').onClick(() => { this.controller.close() this.confirm }).margin(10) } } } }
8. 最后奉上一个登录页面
二、效果一览
三、源码剖析
登录页面源码
import promptAction from '@ohos.promptAction';
@Component
@Entry
struct LoginPage {
@State account: string = '';
@State password: string = '';
dialog: CustomDialogController = new CustomDialogController({
builder: TipDialog({
cancel: this.onCancel,
commit: this.onCommit,
msg: this.account
}),
alignment: DialogAlignment.Center
});
onCancel() {
promptAction.showToast({ message: '取消登录' })
}
onCommit() {
promptAction.showToast({ message: '登录成功' })
}
@State color: Color = 0x1f2937;
build() {
Column() {
RelativeContainer() {
Text('欢迎登录')
.fontSize(25)
.fontColor(this.color)
.margin({ top: 111, left: 33 })
.id('tips')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.fontWeight(FontWeight.Bold)
Text('用户名:')
.fontSize(14)
.fontColor(this.color)
.alignRules({
top: { anchor: 'tips', align: VerticalAlign.Bottom },
left: { anchor: 'tips', align: HorizontalAlign.Start }
})
.margin({ top: 140, left: 33 })
.height(20)
.textAlign(TextAlign.Center)
.id('account')
.width(60)
TextInput({ placeholder: '请输入账号' })
.alignRules({
top: { anchor: 'account', align: VerticalAlign.Bottom },
left: { anchor: 'account', align: HorizontalAlign.Start }
})
.margin({ top: 13, left: 33, right: 33 })
.id("etAccount")
.height(46)
.fontColor(this.color)
.onChange(val => {
this.account = val;
})
Text('密码:')
.fontSize(14)
.fontColor('#333333')
.alignRules({
top: { anchor: 'etAccount', align: VerticalAlign.Bottom },
left: { anchor: 'etAccount', align: HorizontalAlign.Start }
})
.width(60)
.height(20)
.margin({ top: 15, left: 33 })
.textAlign(TextAlign.Center)
.id('password')
TextInput({ placeholder: '请输入密码' })
.alignRules({
top: { anchor: 'password', align: VerticalAlign.Bottom },
left: { anchor: 'password', align: HorizontalAlign.Start }
})
.type(InputType.Password)
.margin({ top: 13, left: 33, right: 33 })
.id("etPassword")
.height(46)
.onChange(val => {
this.password = val;
})
Toggle({ type: ToggleType.Checkbox })
.onChange((isChecked) => {
if (isChecked) {
promptAction.showToast({ message: "记住账号密码" })
} else {
promptAction.showToast({ message: "不记住密码" })
}
})
.alignRules({
top: { anchor: 'password', align: VerticalAlign.Bottom },
left: { anchor: 'password', align: HorizontalAlign.Start }
})
.height(15)
.margin({
top: 80, left: 33
})
.id('isRecord')
Text('记住密码')
.fontColor("#999999")
.fontSize(12)
.height(15)
.margin({
top: 80,
left: 6
})
.alignRules({
top: { anchor: 'password', align: VerticalAlign.Bottom },
left: { anchor: 'isRecord', align: HorizontalAlign.End }
})
.id('tvRecord')
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
.onClick(() => {
this.dialog.open()
})
.alignRules({
top: {
anchor: 'tvRecord', align: VerticalAlign.Bottom
},
left: { anchor: 'etAccount', align: HorizontalAlign.Start },
right: { anchor: 'etAccount', align: HorizontalAlign.End }
})
.height(47)
.margin({
right: 23,
top: 19,
left: 23
})
.backgroundColor(0x00c250)
.type(ButtonType.Capsule)
.id('btCommit')
}.width('100%')
.height('100%')
}
}
}
@CustomDialog
struct TipDialog {
dialogController: CustomDialogController;
cancel: () => void
commit: () => void
msg: string;
build() {
Column() {
Text('确定登录当前账号“' + this.msg + '”吗')
.fontColor(Color.Red)
.fontSize(44)
Row() {
Button('确定')
.type(ButtonType.Capsule)
.onClick(() => {
this.dialogController.close()
this.commit
})
Button('取消')
.type(ButtonType.Capsule)
.onClick(() => {
this.dialogController.close()
this.cancel
})
}
}
}
}
其他源码
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct MyCustomDialog {
dialogController: CustomDialogController = new CustomDialogController({
builder: MyDialog({
cancel: this.onCancel,
confirm: this.onAccept,
})
, alignment: DialogAlignment.Default
})
onCancel() {
promptAction.showToast({ message: '取消' })
}
onAccept() {
promptAction.showToast({ message: '确定' })
}
build() {
Flex({justifyContent: FlexAlign.Center}){
Button('提交')
.onClick(() => {
this.dialogController.open()
})
}
}
}
@CustomDialog
struct MyDialog {
controller: CustomDialogController;
cancel: () => void;
confirm: () => void;
build() {
Column() {
Text('确认提交吗')
.fontSize(44)
.margin(10)
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('取消').onClick(() => {
this.controller.close()
this.cancel
})
.margin(10)
Button('确定').onClick(() => {
this.controller.close()
this.confirm
}).margin(10)
}
}
}
}
import promptAction from '@ohos.promptAction'
@Component
@Entry
struct MyTextInput {
build() {
Column() {
TextArea() //多选输入框
TextInput({ placeholder: '请输入密码' }) //单选输入框 placeholder 占位提醒字符
.type(InputType.Password) //密码输入模式
.backgroundColor(0xf7f7f7)
.onChange(val => {
promptAction.showToast({ message: val })
})
.onFocus(() => {
promptAction.showToast({ message: "获得焦点" })
})
}.width('100%')
}
}
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct MyText {
build() {
Column() {
Text('我是文本') {
Span('我是Span文本').fontSize(33).fontColor(Color.Pink)
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) //中划线
Span('我是Span文本2').fontColor(Color.Blue).fontSize(33)
.decoration({ type: TextDecorationType.Underline, color: Color.Blue }) //下划线
.onClick(() => {
promptAction.showToast({ message: '我是Span文本2' });
})
Span('我是Span文本3')
.fontSize(33)
.fontColor(Color.Green)
.decoration({ type: TextDecorationType.Overline, color: Color.Yellow }) //上划线
.textCase(TextCase.UpperCase) //全部大写
.onClick(() => {
promptAction.showToast({ message: '我是Span文本3' });
})
}
Text($r('app.string.app_name'))
.baselineOffset(0)
.fontSize(44)
.fontColor(Color.Pink)
.textAlign(TextAlign.Center) //对齐方式，居中对齐
.border({ width: 1 })
.padding(10)
.width(300)
Text('')
.baselineOffset(10)
.fontSize(44)
.fontColor(Color.Pink)
.letterSpacing(2)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis }) //超长部分...
.textAlign(TextAlign.Center) //对齐方式，居中对齐
.border({ width: 1 })
.padding(10)
.width(300)
Text('')
.baselineOffset(20) //文本基线偏移量
.fontSize(44)
.fontColor(Color.Pink)
.textAlign(TextAlign.Center) //对齐方式，居中对齐
.border({ width: 1 })
.lineHeight(60) //文本行高
.padding(10)
.letterSpacing(10) //设置字符间距
.width(300)
.copyOption(CopyOptions.LocalDevice) //设置文本是否可以复制粘贴
.onClick(() => {
promptAction.showToast({ message: '我是' })
})
}
}
}
@Component
@Entry
struct MyProgress {
build() {
Column() {
Progress({ value: 24, total: 100, type: ProgressType.Linear }) //线形进度条
.width(50).height(100) //自api9开始，组件高度大于宽度时，自适应垂直显示
Progress({ value: 24, total: 100, type: ProgressType.Linear }) //线形进度条
.width(150).height(100) //自api9开始，组件高度大于宽度时，自适应垂直显示
Progress({ value: 24, total: 100, type: ProgressType.Ring }) //环形进度条
.width(100).height(100)
.style({ strokeWidth: 10 }) //自定义宽度
.color(Color.Green) //自定义颜色
Progress({ value: 24, total: 100, type: ProgressType.ScaleRing }) //环形带刻度进度条
.width(100).height(100)
.style({ scaleCount: 20, scaleWidth: 5, strokeWidth: 10 })//设置
Progress({value: 24, total: 100, type: ProgressType.Eclipse})//圆形进度条
.width(100).height(100)
.color(Color.Gray)
.colorBlend(Color.Blue)
.borderColor(Color.Red)
Progress({value: 24, total: 100, type: ProgressType.Capsule})//胶囊进度条
}
}
}
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct MyToggle {
build() {
Row() {
Toggle({ type: ToggleType.Switch, isOn: false })//无子组件的创建方式
.switchPointColor(Color.Green)//仅对switch类型生效
Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status')//有子组件的创建方式
.fontColor(Color.Red)
}.width('80')
.selectedColor(Color.Yellow)//自定义背景颜色
.onChange(isOn=>{
if (isOn) {
promptAction.showToast({message: '我被选中了'})
}
})
}.height('100%')
.alignItems(VerticalAlign.Center)
}
}
import promptAction from '@ohos.promptAction'
@Component
@Entry
struct MyRadio {
build() {
Row() {
Radio({ value: 'yes', group: 'isRight' })
.onChange((isChecked: boolean) => {
if (isChecked) {
promptAction.showToast({ message: 'yes' })
} else {
promptAction.showToast({ message: 'no' })
}
})
Radio({ value: 'no', group: 'isRight' })
.checked(false)
}.height('100%')
.alignItems(VerticalAlign.Center)
}
}
import router from '@ohos.router'
@Entry
@Component
struct StudyWidget {
build() {
Row() {
Column() {
Button() {
Text('Button').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyButton' }).then(() => {
console.log('进入mediaQuery布局')
}).catch((err) => {
console.log(`err is ${err.code}`)
})
})
.margin(15)
Button() {
Text('Radio').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyRadio' })
})
.margin(15)
Button() {
Text('Toggle').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyToggle' })
})
.margin(15)
Button() {
Text('Progress').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyProgress' })
})
.margin(15)
Button() {
Text('Text').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyText' })
})
.margin(15)
Button() {
Text('TextInput').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyTextInput' })
})
.margin(15)
Button() {
Text('CustomDialog').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/MyCustomDialog' })
})
.margin(15)
Button() {
Text('Login').fontSize(30)
}.type(ButtonType.Capsule)
.onClick(() => {
router.pushUrl({ url: 'pages/widget/LoginPage' })
})
.margin(15)
}.width('100%')
.alignItems(HorizontalAlign.Center)
}.height('100%')
}
}
@Entry
@Component
struct MyButton {
build() {
Row() {
Column() {
Button('无子组件')
.type(ButtonType.Capsule) //设置按钮类型
.stateEffect(true)
.onClick(() => { //点击事件
console.error('click it')
})
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
Image($r('app.media.app_icon')).width(30).height(30).margin({ left: 12 })
Text('logo，有子组件')
.fontSize(44).fontColor(Color.Green).margin({ left: 10, right: 10 }) //设置文本样式
}.alignItems(VerticalAlign.Center)
}
.borderRadius(9) //设置按钮圆角
.backgroundColor(0x00c250).height(50)
}
}
}
}
5930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
