学习了一段鸿蒙课,觉得有必要晒一晒自己的进步。通过对ArkUI的学习,我学会了它主要分为基础组件、容器和弹窗。下面我主要对基础组件的按钮和文本进行分析,希望对学习鸿蒙开发的同学有帮助。
1.在DevEco Studio中创建一个新项目
2.在main下面的pages文件夹下建立ButtonPage.ets项目
项目代码如下:
import TitleTab from '../../component/title/TitleTab'
import Title from '../../component/title/Title'
import SelectCustom from '../../component/controller/SelectCustom'
import SwitchCustom from '../../component/controller/SwitchCustom'
import SliderCustom from '../../component/controller/SliderCustom'
@Entry
@Component
struct ButtonPage {
@State selectTab: number = 1
//type
@State type: ButtonType = ButtonType.Capsule
@State typeArr: ButtonType[] = [
ButtonType.Capsule,
ButtonType.Circle,
ButtonType.Normal
]
@State typeValueArr: { value: string }[] = [
{ value: 'Capsule' },
{ value: 'Circle' },
{ value: 'Normal' }
]
//stateEffect
@State stateEffect: boolean = true
//width
@State widthValue: number = 80
//height
@State heightValue: number = 50
//fontSize
@State sizeValue: number = 14
@Builder pageTitle() {
Column() {
Title({ pageTitle: 'Button 按钮' })
TitleTab({ selectTab: $selectTab, interface: false, property: true, common: true })
}
.width('100%')
.backgroundColor($r('app.color.start_window_background'))
}
build() {
Column() {
Navigation() {
Column() {
Blank()
Column() {
Button('Button')
.type(this.type)
.stateEffect(this.stateEffect)
.backgroundColor($r('app.color.brand'))
.width(this.widthValue)
.height(this.heightValue)
.fontSize(this.sizeValue)
}
Blank()
Column() {
//tab 1
Column () {
SelectCustom({ name: 'type', valuesList: $typeValueArr, itemsList: $typeArr, selectItem: $type })
Divider()
.color($r('app.color.line_grey'))
SwitchCustom({ name: 'stateEffect', isOn: $stateEffect })
}
.visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
//tab 2
Column(){
SliderCustom({ name: 'width', value: $widthValue, min: 50, max: 180 })
Divider()
.color($r('app.color.line_grey'))
SliderCustom({ name: 'height', value: $heightValue, min: 20, max: 120 })
Divider()
.color($r('app.color.line_grey'))
SliderCustom({ name: 'fontSize', value: $sizeValue, min: 10, max: 40 })
}
.visibility(this.selectTab === 2 ? Visibility.Visible : Visibility.None)
}
.padding({ left: 12, right: 12 })
.backgroundColor($r('app.color.start_window_background'))
.margin({ left: 20, right: 20, top: 16, bottom: 16 })
.borderRadius(16)
}
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
.title(this.pageTitle())
.hideBackButton(false)
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_grey'))
}
}
运行后在previewer预览器进行预览,效果如下:
3.在main下面的pages文件夹下建立TextPage.ets项目
项目代码如下:
import TitleTab from '../../component/title/TitleTab'
import Title from '../../component/title/Title'
import SliderCustom from '../../component/controller/SliderCustom'
import SelectCustom from '../../component/controller/SelectCustom'
@Entry
@Component
struct TextPage {
@State selectTab: number = 1
//textAlign
@State textAlign : TextAlign = TextAlign.Center
@State textAlignList : TextAlign[] = [
TextAlign.Center,
TextAlign.Start,
TextAlign.End
]
@State textAlignValueList : { value: string }[] = [
{ value: 'Center' },
{ value: 'Start' },
{ value: 'End' }
]
//maxLines
@State maxLines : number = 1
//textOverflow
@State textOverflow :TextOverflow = TextOverflow.None
@State textOverflowList :TextOverflow[] = [
TextOverflow.None,
TextOverflow.Clip,
TextOverflow.Ellipsis,
]
@State textOverflowValueList: { value: string }[] = [
{ value: 'None' },
{ value: 'Clip' },
{ value: 'Ellipsis' }
]
//type
@State type: TextDecorationType = TextDecorationType.Underline
@State typeList: TextDecorationType[] = [
TextDecorationType.Underline,
TextDecorationType.Overline,
TextDecorationType.LineThrough,
TextDecorationType.None
]
@State typeValueList: { value: string }[] = [
{ value: 'Underline' },
{ value: 'Overline' },
{ value: 'LineThrough' },
{ value: 'None' }
]
//color
@State color: Color = Color.Blue
@State colorList: Color[] = [
Color.Blue,
Color.Black,
Color.Brown,
Color.Green,
Color.Orange,
Color.Grey
]
@State colorValueList: { value: string }[] = [
{ value: 'Blue' },
{ value: 'Black' },
{ value: 'Brown' },
{ value: 'Green' },
{ value: 'Orange' },
{ value: 'Grey' }
]
//baselineOffset
@State baselineOffset : number = 0
//letterSpacing
@State letterSpacing: number = 5
//textCase
@State textCase: TextCase = TextCase.Normal
@State textCaseList: TextCase[] = [
TextCase.Normal,
TextCase.LowerCase,
TextCase.UpperCase,
]
@State textCaseValueList: { value: string }[] = [
{ value: 'Normal' },
{ value: 'LowerCase' },
{ value: 'UpperCase' }
]
//fontSize
@State fontSize: number = 20
//width
@State widthValue: number = 300
@Builder pageTitle() {
Column() {
Title({ pageTitle: 'Text 文本' })
TitleTab({ selectTab: $selectTab, interface: false, property: true, common: true })
}
.width('100%')
.backgroundColor($r('app.color.start_window_background'))
}
build() {
Column() {
Navigation() {
Column() {
Blank()
Column() {
Text('This is text demonstration')
.textAlign(this.textAlign)
.textOverflow({overflow:this.textOverflow})
.decoration({type:this.type,color:this.color})
.baselineOffset(this.baselineOffset)
.letterSpacing(this.letterSpacing)
.textCase(this.textCase)
.fontSize(this.fontSize)
.width(this.widthValue)
.maxLines(this.maxLines)
}
Blank()
Column() {
// tab 1
Column() {
SelectCustom({
name: 'textAlign',
selectItem: $textAlign,
itemsList: $textAlignList,
valuesList: $textAlignValueList
})
Divider().color($r('app.color.line_grey'))
SelectCustom({
name: 'textOverflow',
selectItem: $textOverflow,
itemsList: $textOverflowList,
valuesList: $textOverflowValueList
})
Divider().color($r('app.color.line_grey'))
SliderCustom({name:'maxLines',value:$maxLines,min:1,max:3})
Divider().color($r('app.color.line_grey'))
SelectCustom({
name: 'decoration-type',
selectItem: $type,
itemsList: $typeList,
valuesList: $typeValueList
})
Divider().color($r('app.color.line_grey'))
SelectCustom({
name: 'decoration-color',
selectItem: $color,
itemsList: $colorList,
valuesList: $colorValueList
})
Divider().color($r('app.color.line_grey'))
SliderCustom({name:'baselineOffset',value:$baselineOffset,min:-20,max:20})
Divider().color($r('app.color.line_grey'))
SliderCustom({ name: 'letterSpacing', value: $letterSpacing, min: -10, max: 20 })
Divider().color($r('app.color.line_grey'))
SelectCustom({
name: 'textCase',
selectItem: $textCase,
itemsList: $textCaseList,
valuesList: $textCaseValueList
})
}
.visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
// tab 2
Column() {
SliderCustom({ name: 'fontSize', value: $fontSize, min: 10, max: 40 })
Divider().color($r('app.color.line_grey'))
SliderCustom({ value: $widthValue, name: 'width', min: 200, max: 350 })
}
.visibility(this.selectTab === 2 ? Visibility.Visible : Visibility.None)
}
.padding({ left: 12, right: 12 })
.backgroundColor($r('app.color.start_window_background'))
.margin({ left: 20, right: 20, top: 16, bottom: 16 })
.borderRadius(16)
}
.height('100%')
.width('100%')
}
.height('100%')
.width('100%')
.title(this.pageTitle())
.hideBackButton(false)
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_grey'))
}
}
运行结果如下:
可以通过修改代码实现文本内容的修改。
总结:通过鸿蒙课的学习,我学会了要勇于创新,不能故步自封。只有开发出属于自己的东西才能走的更久,走的更远。