TYUT移动框架技术（HarmonyOS应用开发）常用组件示例

实验涉及的常用组件确实有点多哈，咱别着急……慢慢来^^_^

实验一和实验二相信各位小伙伴都会，我就不啰嗦啦！

整体预览长这样：

一、基础组件

（1）CheckBoxGroup && CheckBox

import router from '@ohos.router'

@Component
export struct MyCheckBox {
   
  build(){
   
    Column({
   space:10}){
   
      Flex({
   justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
   
        CheckboxGroup({
   group: 'checkboxGroup'})
          .selectedColor('#007DFF')
        Text('选择熟悉的开发语言').fontSize(18).lineHeight(20).fontColor('#182431').fontWeight(500)
      }
      //选项1
      Flex({
   justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
   
        Checkbox({
   name: 'checkbox1', group: 'checkboxGroup'})
          .selectedColor('#007DFF').select(true)
        Text('java').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
      }
      .margin({
   left:36})
      //选项2
      Flex({
   justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
   
        Checkbox({
   name: 'checkbox2', group: 'checkboxGroup'})
          .selectedColor('#007DFF')
        Text('python').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
      }
      .margin({
   left:36})
      //选项3
      Flex({
   justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
   
        Checkbox({
   name: 'checkbox3', group: 'checkboxGroup'})
          .selectedColor('#007DFF')
        Text('ArkTs').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
      }
      .margin({
   left:36})
      //选项4
      Flex({
   justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
   
        Checkbox({
   name: 'checkbox4', group: 'checkboxGroup'})
          .selectedColor('#007DFF')
        Text('number name').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
      }
      .margin({
   left:36})
      Button('返回')
        .onClick(()=>{
   
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

（2）Radio

import router from '@ohos.router'

@Component
export struct MyRadio {
   
  build() {
   
    Column({
    space: 10 }) {
   
      Text('性别')
        .fontSize(30)
      Row({
    space: 5 }) {
   
        Radio({
    value: 'radio1', group: 'radioGroup' })
        Text('男').fontSize(18)
        Radio({
    value: 'radio2', group: 'radioGroup' })
        Text('女').fontSize(18)
        Radio({
    value: 'radio3', group: 'radioGroup' })
          .checked(true)
        Text('number name').fontSize(18)
      }

      Button('返回')
        .onClick(() => {
   
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

（3）Button

import router from '@ohos.router'

@Component
export struct MyButton {
   
  build() {
   
    Column({
   space:10}){
   
      Text('Normal类型')
        .fontSize(20)
      Row(){
   
        Button('确定')
          .type(ButtonType.Normal)
          .borderRadius(8)
          .backgroundColor(Color.Green)
          .stateEffect(true)
        Button('确定')
          .type(ButtonType.Normal)
          .borderRadius(8)
          .backgroundColor(Color.Green)
          .stateEffect(false)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

      Text('Capsule类型')
        .fontSize(20)
      Row(){
   
        Button('number')
          .type(ButtonType.Capsule)
          .backgroundColor(Color.Pink)
          .stateEffect(true)
        Button('name')
          .type(ButtonType.Capsule)
          .backgroundColor(Color.Pink)
          .stateEffect(true)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Text('Circle类型')
        .fontSize(20)
      Row(){
   
        Button('取消')
          .type(ButtonType.Circle)
          .backgroundColor(Color.Gray)
          .stateEffect(true)
          .width(60)
        Button('取消')
          .type(ButtonType.Circle)
          .backgroundColor(Color.Gray)
          .stateEffect(true)
          .opacity(0.5)
          .width(60)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('返回')
        .onClick(()=>{
   
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Center)
    .margin({
   left:50})
  }
}

（4）DataPanel && Gauge

import router from '@ohos.router'

@Component
export struct MyPanelandGauge {
   
  @State valuearr: number[] = [10, 20, 20, 10, 10, 10, 10, 10]
  @State valuearr2: number[] = [30, 20, 18, 8, 4];

  build() {
   
    Column({
    space: 10 }) {
   
      Text('DataPanel')
        .fontSize(24)
        .fontWeight(500)
      Column({
    space: 10 }) {
   
        Text('线形数据面板')
          .fontSize(24)
          .fontWeight(500)
        DataPanel({
    values: this.valuearr, type: DataPanelType.Line})
          .width(300)
          .height(30)
        Text('环形数据面板')
          .fontSize(24)
          .fontWeight(500)
        DataPanel({
   values: this.valuearr2, type: DataPanelType.Circle, max: 100})
          .width(200)
          .height(200)
      }
      .width('100%')
      .height('40%')
      .alignItems(HorizontalAlign.Start)
      .margin({
    left: 50 })
      Column() {
   
        Text('Gauge')
          .fontSize(24)
          .fontWeight(500)

        Gauge({
   value: 40, min: 0, max: 100})
          .startAngle(210)
          .endAngle(150)
          .strokeWidth(30)
          .colors([[0x317AF7, 0.1],  [0x5BA854, 0.2],  [0xE08C3A, 0.3], [0x9C554B, 0.4]])
      }
      .height('40%')
      Button('返回')
        .onClick(() => {
   
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .margin({
    top: 20 })
  }
}

（5）Navigation

import router from '@ohos.router'

@Entry
@Component
export struct MyNavigation {
   
  @State currentIndex: number = 0
  //设置底部工具栏的文字信息
  @State toolBar: Array<object> = [
    {
    text: '信息', num: 0 },
    {
    text: '发现', num: 1 },
    {
    text: '我', num: 2 }
  ]
  //利用@Builder设计主副标题
  @Builder NavigationTitle() {
   
    Row() {
   
      Text('name')
        .fontColor('#182431')
        .fontSize(40)
        .lineHeight(41)
        .fontWeight(700)
        .margin({
    top: 30, left: 30 })
    }
    .width('100%')
    Row() {
   
      Text(' number')
        .fontColor('182431')
        .fontSize(24)
        .lineHeight(24)
        .opacity(0.6)
        .margin({
    left: 26, top: 10 })
    }
    .width('100%')
  }
  //利用@Builder设计底部导航栏
  @Builder Naviga