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

最新推荐文章于 2024-09-17 03:10:30 发布
最新推荐文章于 2024-09-17 03:10:30 发布
阅读量393 收藏 10
点赞数 5
分类专栏： HarmonyOS 文章标签： harmonyos 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxx_185/article/details/139601872
版权

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

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

整体预览长这样：
在这里插入图片描述

一、基础组件

（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 NavigationToolBar() {
    Row() {
      //利用ForEach进行数据渲染,将前面定义的toolBar底部导航栏文字渲染出来
      ForEach(this.toolBar, (item) => {
        //底部导航栏UI设计为上面是图片，下面是文字
        //工具栏文字与图片设计
        Column() {
          if (this.currentIndex == item.num) {
            Image($r('app.media.collectcolor'))
              .width(24)
              .height(24)
          } else {
            Image($r('app.media.collect'))
              .width(24)
              .height(24)
          }
          Text(item.text)
            .fontColor(Color.Orange)
            .fontSize(24)
            .fontWeight(500)
            .margin({ top: 3 })
        }
        .onClick(() => {
          this.currentIndex = item.num
        })
      })
    }
    .height(80)
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
  }

  build() {
    Column({ space: 10 }) {
      this.NavigationTitle()
      Search({ placeholder: '请输入要搜索的信息' })
        .backgroundColor(Color.Grey)
        .opacity(.3)
        .width('90%')
      Text('中间内容')
        .fontSize(40)
        .width('90%')
        .height('65%')
        .backgroundColor('#ffebe5e5')
      this.NavigationToolBar()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}

（6）Stepper && StepperItem

在这里插入图片描述

import router from '@ohos.router'

@Styles function itemStyle() {
  .width(336)
  .height(621)
  .margin({ top: 48, left: 12 })
  .borderRadius(24)
  .backgroundColor('#ffebe5e5')
}

@Extend(Text) function itemTextStyle() {
  .fontColor('#182431')
  .fontSize(36)
  .fontWeight(500)
  .opacity(0.4)
  .margin({ top: 82, bottom: 40 })
}

@Component
export struct MyStepper {
  @State currentIndex: number = 0
  @State firstState: ItemState = ItemState.Normal
  @State secondState: ItemState = ItemState.Normal
  @State thirdState: ItemState = ItemState.Normal

  build() {
    Stepper() {
      //第一个步骤页
      StepperItem() {
        Column() {
          Text('步骤一:xxxxx').itemTextStyle()
          Button('返回主页面')
            .type(ButtonType.Capsule)
            .backgroundColor('#007dFF')
            .onClick(() => {
              router.back()
            })
        }
        .itemStyle()
      }
      .nextLabel('下一步')
      .status(this.firstState)
      //第二个步骤页
      StepperItem() {
        Column() {
          Text('步骤二:xxxxx').itemTextStyle()
        }
        .itemStyle()
      }
      .nextLabel('下一步')
      .prevLabel('上一步')
      .status(this.secondState)
      //第三个步骤页
      StepperItem() {
        Column() {
          Text('步骤三:xxxxx').itemTextStyle()
        }
        .itemStyle()
      }
      .prevLabel('上一步')
      .status(this.thirdState)
    }
  }
}

（7）TextPicker && TextTimer

在这里插入图片描述

import router from '@ohos.router'
@Component
export struct MyTextPickerandTimer {
  @State courses : string[] = ['移动框架与技术','编译原理','软件测试','Python','Web设计与实现']
  @State course : string = this.courses[0]
  @State iscountdown : boolean = false
  timecontrol : TextTimerController = new TextTimerController()
  build(){
    Column(){
      Column(){
        Text('TextPicker')
          .fontSize(30)
          .textAlign(TextAlign.Center)
        TextPicker({range: this.courses})
          .onChange((item)=>{
            this.course = item
          })
        Text('name选中的课程是：'+this.course)
      }
      .height('40%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Divider()
      Column(){
        Text('TextTimer')
          .fontSize(30)
          .textAlign(TextAlign.Center)
        TextTimer({ isCountDown: this.iscountdown, count: 30000, controller: this.timecontrol })
          .fontColor(Color.Black)
          .fontSize(50)
        Row({space: 20}){
          Button("开始").onClick(() => {
            this.timecontrol.start()
          })
          Button("暂停").onClick(() => {
            this.timecontrol.pause()
          })
          Button("重置").onClick(() => {
            this.timecontrol.reset()
          })
        }
      }
      .height('40%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('返回')
        .onClick(()=>{
          router.back()
        })
    }
    .width('100%')
    .height('100%')
  }
}

（8）DatePicker && TimePicker

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyDateandTimePicker {
  @State selectTime: Date = new Date('2024-04-30')
  @State isLunar: boolean = false
  @State isMilitaryTime: boolean = false

  build() {
    Column() {
      Column() {
        Text('DatePicker')
          .fontSize(30)
        DatePicker({
          start: new Date('1970-1-1'),
          end: new Date('2100-1-1'),
          selected: this.selectTime
        })
          .lunar(this.isLunar)
        Button('切换农历公历')
          .onClick(() => {
            this.isLunar = !this.isLunar
          })
      }
      .width('100%')
      .height('40%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Column() {
        Text('TimePicker')
          .fontSize(30)
        TimePicker({
          selected: this.selectTime
        })
          .useMilitaryTime(this.isMilitaryTime)
        Button('切换12小时制/24小时制')
          .onClick(() => {
            this.isMilitaryTime = !this.isMilitaryTime
          })
      }
      .width('100%')
      .height('40%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

（9）PatternLock && QRCode

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyLockandQRCode {
  @State password: number[] = [0, 1, 2, 5, 4, 3]
  @State value: string = 'number name'
  @State message: string = '请输入密码'

  build() {
    Column() {
      Column() {
        Text('PatternLock')
          .fontSize(30)
          .textAlign(TextAlign.Center)
        Text(this.message)
          .fontSize(24)
        PatternLock()
          .sideLength(200)
          .circleRadius(9)
          .pathStrokeWidth(18)
          .activeColor('#B0C4DE')
          .selectedColor('#228B22')
          .pathColor('#90EE90')
          .backgroundColor('#F5F5F5')
          .autoReset(true)
          .onPatternComplete((input: Array<number>) => {
            // 输入的密码长度小于5时，提示重新输入
            if (input === null || input === undefined || input.length < 5) {
              this.message = '请重新输入长度为5的密码'
              return
            }
            // 判断密码长度是否大于0
            if (this.password.length > 0) {
              // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
              if (this.password.toString() === input.toString()) {
                //this.password = input
                this.message = '密码正确'
              } else {
                this.message = '请重新输入长度为5的密码'
              }
            }
          })

        Button('重置').margin(30).onClick(() => {
          // 重置密码锁
          this.password = []
        })
      }
      .width('100%')
      .height('50%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Column() {
        Text('QRCode')
          .fontSize(30)
          .textAlign(TextAlign.Center)
        QRCode(this.value)
          .width(200)
          .height(200)
          .backgroundColor(Color.Orange)
      }
      .width('100%')
      .height('40%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

（10）Select

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MySelect {
  @State courses: SelectOption[] = [
  //对象：value：''，icon：$r('app.media.xxx')
    { value: '移动框架与技术', icon: $r('app.media.icon') },
    { value: '编译原理', icon: $r('app.media.icon') },
    { value: '软件测试', icon: $r('app.media.icon') },
    { value: 'WEB程序设计', icon: $r('app.media.icon') }
  ]
  @State course: string = ''

  build() {
    Column({ space: 100 }) {
      Select(this.courses)
        .selected(2)
        .value('课程')
        .font({ size: 25, weight: 500 })
        .optionFont({ size: 20, weight: 400 })
        .onSelect((index)=>{
          this.course = this.courses[index].value.toString()
        })
      Text('name number选中的课程是：'+ this.course)
        .fontSize(22)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

二、容器组件

（1）Flex

在这里插入图片描述

import router from '@ohos.router'
@Component
export struct MyFlex{
  build(){
    Column(){
      Flex({
        direction: FlexDirection.Row,
        justifyContent: FlexAlign.SpaceEvenly,
        alignItems: ItemAlign.End,
        wrap: FlexWrap.Wrap
      }){
        Text('1').width(70).height(100).backgroundColor('#1200FE')
        Text('2').width(70).height(110).backgroundColor('#FEFF04')
        Text('3').width(70).height(120).backgroundColor('#FFBFCD')
        Text('4').width(70).height(130).backgroundColor('#008101')
        Text('5').width(70).height(140).backgroundColor('#1200FE')
        Text('6').width(70).height(150).backgroundColor('#FEFF04')
        Text('7').width(70).height(160).backgroundColor('#FFBFCD')
        Text('8').width(70).height(170).backgroundColor('#008101')
      }
      Button('返回')
        .onClick(()=>{
          router.back()
        })
    }
  }
}

（2）Grid

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyGrid {
  @State number: Array<string> = ['2', '0', '2', '1', 'x', 'x', 'x', 'x', 'x']

  build() {
    Column({ space: 10 }) {
      Grid() {
        GridItem() {
          Text('+')
            .fontSize(30)
            .backgroundColor(Color.Grey)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }
        .width(80)
        .height(162)
        .rowStart(0)
        .rowEnd(1)
        .columnStart(3)
        GridItem() {
          Text('=')
            .fontSize(30)
            .backgroundColor(Color.Grey)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }
        .width(80)
        .height(162)
        .rowStart(2)
        .rowEnd(3)
        .columnStart(3)
        GridItem() {
          Text('x')
            .fontSize(30)
            .backgroundColor(Color.Grey)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }
        .width(162)
        .height(80)
        .columnStart(0)
        .columnEnd(1)
        .rowStart(3)
        GridItem() {
          Text('.')
            .fontSize(30)
            .backgroundColor(Color.Grey)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }
        .width(80)
        .height(80)
        .columnStart(2)
        .rowStart(3)
        ForEach(this.number, (num: string) => {
          GridItem() {
            Text(num)
              .fontSize(30)
              .backgroundColor(0xDCDCDC)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
          .width(80)
          .height(80)
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(2)
      .rowsGap(2)
      .width(340)
      .height(340)
      .margin({ left: 10, top: 100 })
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

（3）Navigator

在这里插入图片描述
在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyNavigator {
  @State message: string = 'xxx 2021xxxxxx'

  build() {
    Column() {
      Text('跳转')
        .fontSize(40)
        .onClick(() => {
          router.push({
            url: 'pages/NavigatorPage',
            params: {
              msg: this.message
            }
          })
        })
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}


import router from '@ohos.router'

@Entry
@Component
struct NavigatorPage {
  @State msg: string = router.getParams()?.['msg']

  build() {
    Column(){
      Column(){
        Text(this.msg.slice(0, 4))
          .fontSize(30)
        Text(this.msg.slice(4, 14))
          .fontSize(30)
      }
      .alignItems(HorizontalAlign.Start)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

（4）Scroll && List

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyScrolList {
  @State arr: Array<string> = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  private scroll: Scroller = new Scroller()
  @State idx: number = 0
  @State isrefresh: boolean = false

  build() {
    Column({ space: 10 }) {
      Row() {
        Button('返回')
          .onClick(() => {
            router.back()
          })
        Button('点击下滑350')
          .onClick(() => {
            //this.scroll.scrollTo
            this.scroll.scrollTo({ xOffset: 0, yOffset: 350 })
          })
      }
      Refresh({ refreshing: $$this.isrefresh, offset: 120, friction: 100 }) {
        Scroll(this.scroll) {
          List({ space: 10 }) {
            //ForEach
            ForEach(this.arr, (num: string) => {
              ListItem() {
                Text('选项' + num)
                  .width('80%')
                  .height(100)
                  .fontSize(40)
                  .backgroundColor(Color.White)
                  .borderRadius(15)
                  .textAlign(TextAlign.Center)
              }
            })
          }
          .alignListItem(ListItemAlign.Center)
        }
        //滚动条属性设置
        .scrollBarColor(Color.Blue)
        .scrollBarWidth(10)
        .backgroundColor('#DCDCDC')
      }
      .onRefreshing(() => {
        setTimeout(() => {
          this.arr.unshift('name 2021xxxxxx')
          this.isrefresh = false
        }, 1000)
      })
      Button('跳转到顶部')
        .onClick(() => {
          //scrollEdge()
          this.scroll.scrollEdge(0)
        })
    }
    .width('100%')
    .height('80%')
    .margin({ top: -100 })
  }
}

（5）SideBar

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MySideBar {
  @State isShow: boolean = false
  @State arr: Array<number> = [0, 1, 2]
  @State current: number = 0

  build() {
    SideBarContainer() {
      Column() {
        //ForEach
        ForEach(this.arr, (index) => {
          Column() {
            if (index == this.current) {
              Image($r('app.media.collectcolor')).width(60)
              Text('index' + index).fontSize(15).fontColor(Color.Orange)
            } else {
              Image($r('app.media.collect')).width(60)
              Text('index' + index).fontSize(15).fontColor(Color.Black)
            }
          }
          .onClick(()=>{
            this.current = index
          })
        })
      }
      .margin({ top: 120 })
      Column() {
        Text('name')
          .fontSize(25)
        Text('number')
          .fontSize(25)
        Button('返回')
          .onClick(() => {
            router.back()
          })
      }
      .justifyContent(FlexAlign.Center)
    }
  }
}

（6）Stack

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyStack {
  @State numbers: number[] = [50, 10, 8, 7]

  build() {
    Stack() {
      DataPanel({ values: this.numbers, max: 100, type: DataPanelType.Circle})
      Column(){
        Text('75%').fontSize(50)
        Text('name number').fontColor(Color.Black).opacity(0.6)
      }
    }
  }
}

（7）Badge

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyBadge {
  @State count: number = 10

  build() {
    Column() {
      Badge({
        count: this.count,
        maxCount: 15,
        position: BadgePosition.RightTop,
        style: { fontSize: 20, badgeSize: 25 }
      }) {
        Button('name 2021xxxxxx')
          .onClick(() => {
            this.count += 1
          })
      }
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

（8）RelativeContainer

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyRelativeContainer {
  build() {
    Column({ space: 20 }) {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF0000")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")
        Row().width(100).height(100)
          .backgroundColor("#FEFF04")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row2")
        Row().height(100)
          .backgroundColor("#FFBFCD")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .id("row3")
        Row()
          .backgroundColor("#008101")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row1", align: HorizontalAlign.End}
          })
          .id("row4")
        Row()
          .backgroundColor("#1200FE")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "row2", align: HorizontalAlign.Start},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row5")
      }
      .width(300)
      .height(300)
      .borderColor(Color.Black)
      .borderWidth(1)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

（9）Swiper

在这里插入图片描述

import router from '@ohos.router'

class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }
  totalCount(): number {
    return this.list.length
  }
  getData(index: number): any {
    return this.list[index]
  }
  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }
  unregisterDataChangeListener() {
  }
}

@Component
export struct MySwiper {
  @State arr: Array<number> = [1, 2, 3, 4, 5]
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list = []
    for (var i = 1; i <= 5; i++) {
      list.push(i.toString());
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 20 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Column(){
            Text('第' + item + '页').fontSize(40)
            Text('name 2021xxxxxx').fontSize(20)
          }
          .width('80%')
          .height(350)
          .borderRadius(20)
          .backgroundColor('#DCDCDC')
          .alignItems(HorizontalAlign.Center)
        })
      }
      .itemSpace(3)
      Row() {
        Button('上一页')
          .onClick(() => {
            this.swiperController.showPrevious()
          })
        Button('下一页')
          .onClick(() => {
            this.swiperController.showNext()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

三、媒体组件

Video（需要安装本地模拟器才能看到视频效果，这里就简单截个图）

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyVideo {

  @State speed_rate : PlaybackSpeed =PlaybackSpeed.Speed_Forward_1_00_X

  controller : VideoController = new VideoController()
  build(){
    Column({space:15}){
      Text('2021xxxxxx name')
        .fontSize(24)
        .fontColor(Color.Blue)
      Video({
        src:'../../../resources/base/media/video1.mp4',
        controller: this.controller
      })
        .width('90%')
        .height(300)
        .margin(10)
      Row(){
        Button('播放')
          .onClick(()=>{
            this.controller.start()
          })
        Button('暂停')
          .onClick(()=>{
            this.controller.pause()
          })
        Button('停止')
          .onClick(()=>{
            this.controller.stop()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Row(){
        Button('0.75倍')
          .onClick(()=>{
            this.speed_rate = PlaybackSpeed.Speed_Forward_0_75_X
          })
        Button('原速播放')
          .onClick(()=>{
            this.speed_rate = PlaybackSpeed.Speed_Forward_1_00_X
          })
        Button('2倍')
          .onClick(()=>{
            this.speed_rate = PlaybackSpeed.Speed_Forward_2_00_X
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('返回')
        .onClick(()=>{
          router.back()
        })
        .margin(10)
    }
  }
}

四、弹窗

（1）ActionSheet

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyActionSheet {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('点击展示ActionSheet')
        .onClick(() => {
          ActionSheet.show({
            title: '请选择所要学习的内容',
            message: 'name 2021xxxxxx',
            autoCancel: true,
            confirm: {
              value: '确认',
              action: () => {
                console.log('确认点击成功')
              }
            },
            alignment: DialogAlignment.Bottom,
            sheets: [
              {
                title: 'HarmonyOS介绍',
                action: () => {
                  console.log('HarmonyOS介绍')
                }
              },
              {
                title: '应用开发入门',
                action: () => {
                  console.log('应用开发入门')
                }
              },
              {
                title: 'Ability开发',
                action: () => {
                  console.log('Ability开发')
                }
              },
              {
                title: 'ArkTs语言',
                action: () => {
                  console.log('ArkTs语言')
                }
              }
            ]
          })
        })
      Button('返回')
        .onClick(() => {
          router.back()
        })
        .margin(20)
    }
  }
}

（2）AlertDialog

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

import router from '@ohos.router';
@Component
export struct MyAlertDialog {
  build(){
    Column({space:5}){
      Button('只有一个按钮的弹窗')
        .onClick(()=>{
          AlertDialog.show({
            title: '警告',
            message: 'name 2021xxxxxx',
            autoCancel: true,
            alignment: DialogAlignment.Center,
            confirm:{
              value: '确定',
              action: ()=>{
                console.log('成功点击确定')
              }
            }
          })
        })
      Button('有两个按钮的弹窗')
        .onClick(()=>{
          AlertDialog.show({
            title: '提示',
            message: '是否开启个人热点',
            autoCancel: true,
            alignment: DialogAlignment.Center,
            primaryButton: {
              value: '确定',
              action: ()=>{
                console.log('成功点击确定')
              }
            },
            secondaryButton:{
              value: '取消',
              action: ()=>{
                console.log('成功点击取消')
              }
            }
          })
        })
      Button('返回')
        .onClick(()=>{
          router.back()
        })
    }
  }
}

（3）CustomDialog

在这里插入图片描述

import router from '@ohos.router'

@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  @Link buttonValue: string
  // 弹窗控制器，控制打开/关闭，必须传入，且名称必须为：controller
  controller: CustomDialogController
  // 弹窗中的按钮事件
  cancel: () => void
  confirm: () => void

  build() {
    Column({ space: 5 }) {
      Flex({ justifyContent: FlexAlign.SpaceEvenly, direction: FlexDirection.Column }) {
        Text('修改按钮的文字显示')
          .width('100%')
          .fontSize(20)
          .textAlign(TextAlign.Center)
        TextInput({ placeholder: '请输入要修改的文字' })
          .width('100%')
          .height('20%')
          .borderRadius(12)
          .onChange((value)=>{
            this.buttonValue = value
          })
        Text('确定要修改？')
          .width('100%')
          .fontSize(18)
          .textAlign(TextAlign.Center)
        Row() {
          Button('取消')
            .fontSize(20)
            .fontColor(Color.Black)
            .backgroundColor(Color.White)
            .onClick(() => {
              this.controller.close()
              this.cancel()
            })
          Button('确定')
            .fontSize(20)
            .fontColor(Color.Red)
            .backgroundColor(Color.White)
            .onClick(() => {
              this.controller.close()
              this.confirm()
            })
        }
        .width('100%')
        .height('20%')
        .justifyContent(FlexAlign.SpaceEvenly)
      }
      .width('80%')
      .height('35%')
    }
  }
}

@Component
export struct MyCustomDialog {
  @State textValue1: string = ''
  @State buttonValue1: string = '点击'
  customDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      textValue: $textValue1,
      buttonValue: $buttonValue1,
      confirm: this.onAccept,
      cancel: this.onCancel
    }),
    autoCancel: true
  })

  onCancel() {
    console.log('点击了取消按钮')
  }
  onAccept() {
    console.log('点击了确定按钮')
  }
  exitDialog() {
    console.log('点击遮障层退出')
  }

  build() {
    Column({ space: 10 }) {
      Button(this.buttonValue1)
        .onClick(() => {
          this.customDialogController.open()
        })
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

（4）DatePickerDialog

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyDatePickerDialog {
  @State isLunar: boolean = false
  private selectedDate: Date = new Date('2024-04-15')

  build() {
    Column() {
      Button('切换公历农历')
        .margin({ top: 30 })
        .onClick(() => {
          this.isLunar = !this.isLunar
        })
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
        .lunar(this.isLunar)
      Button('返回')
        .onClick(() => {
          router.back()
        })
        .margin(10)
    }.width('100%')
  }
}

（5）TimePickerDialog

在这里插入图片描述

import router from '@ohos.router'

@Component
export struct MyTimePickerDialog {
  @State isUseMilitaryTime: boolean = false

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      Button("时间滑动选择器弹窗").onClick(() => {
        TimePickerDialog.show({
          onAccept: () => {
          },
          onCancel: () => {
          },
          onChange: () => {
          }
        })
      })
      Button('返回')
        .onClick(() => {
          router.back()
        })
        .margin(10)
    }
  }
}

（6）TextPickerDialog

在这里插入图片描述

import router from '@ohos.router'
@Component
export struct MyTextPickerDialog {
  @State select: number = 1
  private fruits: string[] = ['苹果', '橘子', '桃', '草莓']
  build(){
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      Button("文本滑动选择器弹窗").onClick(() => {
        TextPickerDialog.show({
          range: this.fruits,
          selected: this.select
        })
      })
      Button('返回')
        .onClick(()=>{
          router.back()
        })
        .margin(10)
    }
  }
}

以上就是实验的全部了，本人能力有限，许多地方做的不完善，还请多多体谅！
————供有需要的小伙伴参考

如果可以的话，点个赞应该不过分吧^_^ !!!

呜啦呜啦^_^
关注
专栏目录
太原理工大学移动应用软件开发技术实验报告
qq_36411754的博客
09-24 4912
课程名称 移动应用软件开发技术 实验题目 Android开发环境搭建 一、实验目的 搭建Android开发环境，学习使用Eclipse开发工具进行Android 应用开发的整个流程，为后续实验做好基本准备工作。 二、实验要求 1、掌握Android SDK的安装、配置、使用。 2、掌握Eclipse集成开发环境的使用。 3、实现第一个Android应用程序。 三、实验环境 Windows系统平台 ...
TYUT移动框架（HarmonyOS应用开发）实验指导书
06-11
本文详细介绍了TYUT移动框架（HarmonyOS应用开发）实验指导书中提及的两个主要知识点：DevEco Studio的安装与配置以及Ability开发实验。DevEco Studio是构建HarmonyOS应用的基础，而Ability则是应用的核心构成部分。...
TYUT移动框架技术（鸿蒙开发）复习提纲
qq_65620073的博客
05-30 958
好多...一点一点写主要是整理一些上课说到的概念，大概看一下，只可能出选择填空简答什么的，老师发的那个认证题库最好也看一下，我感觉大概率会出那里的题。代码什么的可以看这个这个 ，我感觉还是挺不错的。考试前一周我会再出一个代码的。一次开发,多端部署指的是:一套代码,一次开发上架,多端按需部署。目的是为了支撑开发者高效地开发多种终端设备上的应用。为了实现这一目的,鸿蒙系统提供了几个核心能力,包括多端开发环境,多端开发能力以及多端分发机制。硬件互助，资源共享；一次开发，多端部署；统一OS，弹性部署。这个概念很重要
TYUT太原理工移动应用开发技术重点
qq_65620073的博客
04-27 906
首先自定义类//1.自定义一个Linstener类，implements OnClickListener//2.重写onClick(View v)@Override//把题目里onClick实现的方法抄过来实现这个类，给控件绑定。注意绑定的时候是你实现的类的名字！！//实现这个类//绑定。
TYUT太原理工移动框架技术期末预测
qq_65620073的博客
06-08 578
没有基础的建议先看一下（真不是广告，这个快速入门真的挺好的）哪怕只看基础语法都行，看了之后看文章就没那么吃力了，然后记代码、看ppt、看老师发的那两个认证题库就ok了。如果你把实验全写过一遍，那基本上是没什么问题的。
大数据技术原理与应用（1-6）-TYUT
weixin_51603782的博客
04-16 4601
考前复习
大数据技术原理与应用（7-11）-TYUT
weixin_51603782的博客
04-17 2410
考前复习
TYUT以后在这里分享复习技巧和移动互联方面的
m0_57930681的博客
04-27 228
只能说6。
TYUT C语言 头歌训练 字符数组
m0_74243656的博客
10-14 1599
总结的C语言训练，希望对大家有帮助
TYUT C语言 头歌训练 顺序结构程序设计
m0_74243656的博客
10-14 623
自己写的一些代码，希望对大家由帮助
WebEX-A-TYUT:web程序设计A（前端开发技术）实验原始码-个人简历页面-刘磊2015005973
03-23
【标题】"WebEX-A-TYUT"是一个与Web程序设计相关的项目，特别是前端开发技术。这个项目由刘磊，一个在太原理工大学学习的学生（学号2015005973）创建，提供了个人简历页面的源代码。这个实验原始码是学习和研究前端...
tyut
04-22
标题“tyut”可能是指一个项目、工具或者特定的技术讨论话题，但由于信息有限，我们只能推测。描述中提到的“NULL”没有提供任何具体信息，但博文链接指向了一个ITeye上的博客文章。从标签“源码”和“工具”我们...
微机原理与接口技术C课程设计 汽车信号灯控制系统（tyut）
10-11
在计算机科学与工程领域，微机原理与接口技术是一门重要的基础课程，它涵盖了计算机硬件与软件之间的交互，以及如何利用这些技术来实现实际应用。本次课程设计的主题是“汽车信号灯控制系统”，旨在让学生深入理解并...
HarmonyOS开发5.0【rcp网络请求】
2301_76813281的博客
09-11 1351
现在鸿蒙的网络还不成熟，`所以咱们需要对网络请求框架二次封装，并且避免业务方直接引用到`,预防当有比较新的成熟性价比高的框架的替换，这个过程肯定是不可避免的
HarmonyOS开发实战（ Beta5.0）自动生成动态路由实践
weixin_55362248的博客
09-14 1039
目前，已有三方库HMRouter封装了完整的动态路由功能，添加了生命周期回调、内置转场动画等功能，如有需要，可直接使用。
HarmonyOS 速记
最新发布
villen_t的博客
09-17 860
Harmony 速记
HarmonyOS Next鸿蒙扫一扫功能实现
JohnLiu的博客
09-14 523
HarmonyOS Next鸿蒙扫一扫功能实现
HarmonyOS开发实战（ Beta5.0）蓝牙实现服务端和客户端通讯详解
weixin_55362248的博客
09-12 1435
客户端以特定服务UUID作为过滤条件扫描服务端，连接到扫描的设备后通过setCharacteristicChangeNotification接口向服务端发送‘通知心率跳动特征值变动’的请求，以便收到服务端该特征值变动的通知消息。
tyut大学计算机基础A考题精选与知识点梳理
本资源是一份tyut大学计算机基础A考题，旨在帮助学生准备计算机基础考试。考试共有8页试卷和2页答题纸，考试规则严谨，强调了正确填写个人信息、使用答题纸答题并交回、以及草稿纸的使用规定。考试内容涵盖了计算机...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值