【江鸟中原】ArkUI组件示例

学习了一段鸿蒙课，觉得有必要晒一晒自己的进步。通过对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'))
  }
}

运行结果如下：

可以通过修改代码实现文本内容的修改。

总结：通过鸿蒙课的学习，我学会了要勇于创新，不能故步自封。只有开发出属于自己的东西才能走的更久，走的更远。