何老师的济亨网

鸿蒙版应用《五笔打字训练》发布

Fri, 12 Sep 2025 09:46:07 +0800

学了鸿蒙开发语言arkts，做出了一个五笔打字训练应用，取名《五笔打字训练》，现在已经发布在华为的手机应用市场。

买了华为的新手机，操作系统为鸿蒙HarmonyOS的可以去下载试用，应用现在是免费的，即免费下载，免费使用。

打开你的华为应用市场，搜索“五笔打字训练”就可以找到，图标和应用的界面如下：

CustomDialog弹窗，bindContentCover做的弹窗

Fri, 11 Jul 2025 23:50:14 +0800

做了一个CustomDialog弹窗，用于输入数字。

@Entry
@Component
struct Page6 {
  @State message1: string = '默认值'
  controller: CustomDialogController = new CustomDialogController({
    builder: TextDialog({
      confirm: (value) => {
        this.message1 = value
      }
    }), //要加括号,要在这里传参
    alignment: DialogAlignment.Bottom, //控制弹窗位置
    offset: { dx: 0, dy: -30 }//位置微调 -- 源码来自 wb98.com
  })

  build() {

    Column({ space: 20 }) {
      Text(this.message1)

      Button('弹出 Dialog')
        .onClick(() => {
          this.controller.open()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Green)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

//========================
@CustomDialog
  //自定义弹窗，可以自由输入数字
struct TextDialog {
  controller: CustomDialogController = new CustomDialogController({
    builder: TextDialog()//控制的对话框名，要加括号
  })
  confirm: (value: string) => void = () => {
  } //回调函数
  value1: string = ''

  build() {
    Column({ space: 10 }) {
      Text('请输入你的答案')
      TextInput({ placeholder: '请输入数字', text: '' })
        .width('80%')
        .type(InputType.Number)
        .onChange((value) => {
          this.value1 = value
        })
      Row({ space: 30 }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
          })
        Button('确定')
          .onClick(() => {
            this.confirm(this.value1) //通过自定义弹窗的回调函数来获得一个值
            this.controller.close()
          })
      }
    }.padding(20)
  }
}

下面2段代码都是用bindContentCover做的弹窗，高仿上面做的CustomDialog弹窗，也是用于输入数字。

代码1：

@Entry
@Component
struct Page5 {
  @State isShow: boolean = false
  @State message: string = '默认值'
  messageZJ: string = ''

  @Builder
  myBuilder() {
    Stack({ alignContent: Alignment.Bottom }) { //这里调节弹窗位置
      // 父容器透明背景
      Column() {
        // 空容器仅用于布局的底部透明背景
      }
      .width('100%')
      .height('100%')
      // .backgroundColor(Color.Transparent)//纯透明
      // .backgroundColor('rgba(0,0,0,0.7)') //黑色背景，0.7透明度
      .backgroundColor('#8b555555') //这2句是为弹窗加上半透明的背景
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

      // 子组件按钮
      Column({ space: 10 }) {

        Column({ space: 10 }) { //内层容器

          TextInput({ placeholder: '请输入文本', text: '默认文本' })
            .width('80%')
            .type(InputType.Number)
            .cancelButton({
              //右边的X按钮
              icon: { size: 16 }
            })
            .onChange((value: string) => {
              // console.log('这是：', value)
              this.messageZJ = value
            })

          Row({ space: 20 }) {
            Button('取消')
              .onClick(() => {
                this.isShow = false
              })
            Button('确定')
              .onClick(() => {
                this.message = this.messageZJ
                this.isShow = false
              })
          }
        }
        .backgroundColor(Color.White) //中间对话框背景颜色
        .width('100%')
        .padding(20)
        .borderRadius(10)
      }
      .backgroundColor(Color.Transparent)
      .width('80%')
      .margin({bottom:30}) //弹窗位置微调 wb86.com
    }

  }

  //----------------------------


  build() {

    Column({space:50}) {

      Text(this.message)
        .bindContentCover($$this.isShow, this.myBuilder(),
          {
            modalTransition: ModalTransition.NONE, //DEFAULT从下往上,ALPHA是透明度变化
            // backgroundColor: Color.Pink
          })
        .fontColor(Color.White)

      Button('弹出 Stack')
        .onClick(() => {
          this.isShow =true
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .backgroundColor('#8b555555')
    .backgroundColor(Color.Green)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  }
}

代码2：

@Entry
@Component
struct Page7 {

  @State isShow: boolean = false
  @State message: string = '默认值'
  messageZJ: string = ''

  @Builder
  myBuilder() {

    Column() {
      // 子组件设置不透明背景色
      Column({ space: 10 }) {

        Column({ space: 10 }) { //内层容器

          TextInput({ placeholder: '请输入文本', text: '默认文本' })
            .width('80%')
            .type(InputType.Number)
            .textIndent(0)//设置首行文本缩进
            .cancelButton({
              //右边的X按钮
              icon: { size: 16 }
            })
            .onChange((value: string) => {
              this.messageZJ=value
            })

          Row({ space: 20 }) {
            Button('取消')
              .onClick(() => {
                this.isShow = false
              })
            Button('确定')
              .onClick(() => {
                this.message = this.messageZJ
                this.isShow = false
              })
          }
        }
        .backgroundColor(Color.White)
        .width('100%')
        .padding(20)
        .borderRadius(10)


      }
      .backgroundColor(Color.Transparent)
      .width('80%')
      .height('100%')
      .justifyContent(FlexAlign.End)
      .offset({y:-30})
    }
    .width('100%')
    .height('100%')
    // .backgroundColor(Color.Transparent)//纯透明--源码来自 wb86.com
    // .backgroundColor('rgba(0,0,0,0.7)') //黑色背景，0.7透明度
    .backgroundColor('#8b555555') //这2句是为弹窗加上半透明的背景
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  }

  build() {

    Column({space:20}){
      Text(this.message)
        .fontColor(Color.White)

      Button('确定 Column')
        .bindContentCover($$this.isShow, this.myBuilder(),
          {
            modalTransition: ModalTransition.NONE, //DEFAULT从下往上,ALPHA是透明度变化
            // backgroundColor: Color.Pink
          })
        .onClick(() => {
          this.isShow=!this.isShow
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Green)
    .justifyContent(FlexAlign.Center)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])


  }
}

懒加载代码，处理的数据类型是泛型

Thu, 10 Jul 2025 22:26:48 +0800

以下代码处理的数据类型为泛型：

// BasicDataSource实现了IDataSource接口，用于管理listener监听，以及通知LazyForEach数据更新
// 以下2个类（BasicDataSource，MyDataSource），用于懒加载的data数据处理
class BasicDataSource<T> implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: T[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): T {
    return this.originDataArray[index];
  }

  // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
      // 写法2：listener.onDatasetChange(
      //         [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]);
    })
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    })
  }
}

class MyDataSource<T> extends BasicDataSource<T> {
  private dataArray: T[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): T {
    return this.dataArray[index];
  }

  public pushData(data: T): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  public pushAllData(data: T[]): void {
    for (let index = 0; index < data.length; index++) {
      this.pushData(data[index])
    }
  }
}

@Entry
@Component
struct Page8 {
  //要懒加载的数据 data 必须要经过 MyDataSource 处理一下才行。
  private data: MyDataSource<string> = new MyDataSource<string>();

  aboutToAppear() {
    //   //加载数据有3种方法，方法1：
    const array: string[] = []
    for (let i = 0; i <= 10000; i++) {
      array.push(`Hello ${i}`)
    }
    this.data.pushAllData(array)

    //   //方法2 -  源码来自 wb98.com
    //   const array =
    //     ['中国', '美国', '英国', '法国', '俄罗斯', '德国', '新西兰', '哥伦比亚', '新加坡', '日本', '越南', '加拿大',
    //       '乌克兰',
    //       '南非', '埃及', '泰国', '澳大利亚', '智利', '巴西', '冰岛']
    //   this.data.pushAllData(array)

      // const array=colors1  //方法3---导入别的页面的数据
      // this.data.pushAllData(array)
  }

  build() {

    Column() {
      //----------------
      List({ space: 3 }) {
        LazyForEach(this.data, (item: string, index: number) => {
          ListItem() {
            Row() {
              Text(item)
                .fontSize(50)
                .onClick(() => {
                  AlertDialog.show({
                    message: 'Index：' + index.toString() + '   item：' + item
                  })
                })
            }
          }
        }, (item: string) => item)
      }.cachedCount(5) //缓存 源码来自 wb86.com
      //----------------
    }

  }
}

懒加载代码，处理的数据是string类型

Thu, 10 Jul 2025 22:06:37 +0800

懒加载的数据要先经过处理，以下代码处理的数据是string类型。

// BasicDataSource实现了IDataSource接口，用于管理listener监听，以及通知LazyForEach数据更新
// 以下2个类（BasicDataSource，MyDataSource），用于懒加载的data数据处理
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string {
    return this.originDataArray[index];
  }

  // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
      // 写法2：listener.onDatasetChange(
      //         [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]);
    })
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): string {
    return this.dataArray[index];
  }

  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  public pushAllData(data: string[]): void {
    for (let index = 0; index < data.length; index++) {
      this.pushData(data[index])
    }
  }
}

@Entry
@Component
struct Page8 {
  //要懒加载的数据 data 必须要经过 MyDataSource 处理一下才行。
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    //   //加载数据有3种方法，方法1：
    const array: string[] = []
    for (let i = 0; i <= 10000; i++) {
      array.push(`Hello ${i}`)
    }
    this.data.pushAllData(array)

    //   //方法2 -  源码来自 wb98.com
    //   const array =
    //     ['中国', '美国', '英国', '法国', '俄罗斯', '德国', '新西兰', '哥伦比亚', '新加坡', '日本', '越南', '加拿大',
    //       '乌克兰',
    //       '南非', '埃及', '泰国', '澳大利亚', '智利', '巴西', '冰岛']
    //   this.data.pushAllData(array)

      // const array=colors1  //方法3---导入别的页面的数据
      // this.data.pushAllData(array)
  }

  build() {

    Column() {
      //----------------
      List({ space: 3 }) {
        LazyForEach(this.data, (item: string, index: number) => {
          ListItem() {
            Row() {
              Text(item)
                .fontSize(50)
                .onClick(() => {
                  AlertDialog.show({
                    message: 'Index：' + index.toString() + '   item：' + item
                  })
                })
            }
          }
        }, (item: string) => item)
      }.cachedCount(5) //缓存
      //----------------
    }

  }
}

List组件新增项，删除项的代码 arkts

Thu, 10 Jul 2025 21:07:54 +0800

@Entry
@Component
struct Page9 {
  @State itemList: string[] = ['Item1', 'Item2', 'Item3'];

  @Builder
  deleteItem(index: number) {
    Button('删除此项')
      .fontSize(15)
      .margin({ left: 10 })
      .onClick(() => {
        //删除1项方法1
        this.itemList = this.itemList.filter((_, i) => i !== index);

        //删除2项方法2 - 源码来自wb98.com
        // this.itemList.splice(index, 1);
        // this.itemList = [...this.itemList];
      })
  }

  addItem() {
    this.itemList = [...this.itemList, `Item${this.itemList.length + 1}`];
  }

  build() {
    Column({ space: 10 }) {
      Button('新增一项 +')
        .onClick(() => {
          this.addItem()
        })

      Button('全部删除 -')
        .onClick(() => {
          this.itemList=[]
        })

      List({ space: 10 }) {
        ForEach(this.itemList, (item: string, index: number) => {
          ListItem() {
            Text(item).fontSize(30).width('100%').backgroundColor(Color.White)
          }
          .swipeAction({
            end: {//右向左划
              builder: () => {
                this.deleteItem(index)
              },
            }
          })
        }, (item: string) => item)
      }
      .padding(10)
      .backgroundColor(0xDCDCDC)
      .width('100%')
      .layoutWeight(1)

    }
  }
}

获取状态栏，导航栏的高度

Thu, 10 Jul 2025 16:21:41 +0800

有2种方式来获取状态栏和导航栏的高度。

一、在 Ability 中获取并全局存储，然后在页面调用。

适用于需要多次调用高度的场景，通过 PersistentStorage 存储获取结果：

// EntryAbility.ets
import { window, common } from '@kit.ArkUI';

onWindowStageCreate(windowStage: window.WindowStage) {
     windowStage.getMainWindow().then((win) => {
      // 获取系统规避区域
      const systemArea1 = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      const systemArea2 = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
      const statusBarHeight = systemArea1.topRect.height; // 状态栏高度（px）
      const navBarHeight = systemArea2.bottomRect.height; // 导航栏高度（px）//源码来自wb98.com

      // 存储到全局变量（需先定义PersistentStorage）
      PersistentStorage.PersistProp('statusBarHeight', px2vp(statusBarHeight));
      PersistentStorage.PersistProp('navBarHeight', px2vp(navBarHeight));
  });
}

在页面中通过 AppStorage.get 使用存储值：

@Entry
@Component
struct Index {

  // 页面组件内调用
  @StorageLink('statusBarHeight') statusBarHeight: number = 0;
  @StorageLink('navBarHeight') navBarHeight: number = 0;

  build() {
    Column() {

      Text(this.statusBarHeight.toString()) //状态栏高度
      Text(this.navBarHeight.toString())   //导航栏高度

    }
  }
}

二、在 UI 组件中动态获取

适用于单次获取的场景：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State height1: number = 0
  @State height2: number = 0

  build() {
    Column() {

      Text(this.height1.toString())
      Text(this.height2.toString())

      Button('获取高度')
        .onClick(() => {
          window.getLastWindow(getContext(this)).then((win) => {
            const systemArea1 = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
            const systemArea2 = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
            const statusBarHeight = px2vp(systemArea1.topRect.height); //状态栏高度
            const navBarHeight = px2vp(systemArea2.bottomRect.height); //导航栏高度 //源码来自wb86.com

            this.height1 = statusBarHeight
            this.height2 = navBarHeight
            // this.height2 = navBarHeight > 0 ? navBarHeight : statusBarHeight //导航栏高度有时获取的值为0,就赋值状态栏一样的数值。

          });
        })
    }
  }
}

用属性更新器来设置属性 arkts

Wed, 09 Jul 2025 10:44:00 +0800

代码如下，如果在预览器测试，如果测试出现问题，重新启动一下预览器可解决问题，我在测试过程中遇到过此情况。

import { AttributeUpdater } from '@ohos.arkui.modifier' // 属性更新器 - 源码来自 wb98.com

//分别为按钮和文本组件建2个类
class Mybutton1 extends AttributeUpdater<ButtonAttribute> { //参数是 组件名+Attribute
  // 首次绑定时触发initializeModifier方法，进行属性初始化---不初始化，也没事，绑定这个空类就可以很自由地设置组件的属性
  initializeModifier(instance: ButtonAttribute): void {
    instance
      .width('50%')
      .height(30)
      .backgroundColor(Color.Red)
  }
}

class MyText1 extends AttributeUpdater<TextAttribute> {//空，属性设置不初始化
}

@Entry
@Component
struct Page8 {
 button1: Mybutton1 = new Mybutton1();
 text1:MyText1=new MyText1()

  build() {

    Column() {
      Button('确定')
        .attributeModifier(this.button1)//动态设置组件的属性方法,这里要绑定
        .onClick(() => {
          // 下面就就是设置属性
          this.button1.attribute?.backgroundColor(Color.Green).fontColor(Color.Blue)
            .fontSize(50).offset({ x: 100 }).height(100)
        })

      Text('文本组件')
        .attributeModifier(this.text1)
        .onClick(() => {
          this.text1.attribute?.backgroundColor(Color.Pink).fontSize(33).margin(50).borderRadius(10)
        })
    }

  }
}

自定义单选框组件

Tue, 08 Jul 2025 22:02:07 +0800

封装前的代码：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Page2 {
  suzu: string[] = ['中国', '美国', '英国', '法国', '俄罗斯']
  @State setSele: Array<boolean> = new Array(this.suzu.length).fill(false)

  build() {
    Column({ space: 10 }) { //----------源码来自 wb98.com
      ForEach(this.suzu, (item: string, index: number) => {
        ListItem() {

          Column() {

            Row() {
              Radio({ value: item + '1', group: 'group1' })
                .checked(this.setSele[index])
                .onChange((value: boolean) => {
                  console.log(String(value))
                  this.setSele[index] = value
                  // promptAction.showToast({ message: '我是:' + item + ' ' + index }) //点击处报告
                })

              Text(item)
                .focusable(false)
                .onClick(() => {
                  // promptAction.showToast({ message: '我是:' + item + ' ' + index }) //点击处报告
                  for (let i = 0; i < this.setSele.length; i++) { //设置问题转为处理数组问题，所以必须先定义一个跟源大小相一致的数组
                    if (i == index) { //设置单选框
                      this.setSele[i] = !this.setSele[i]
                    } else {
                      this.setSele[i] = false
                    }
                  }
                })
            }
            .height(30)
            .width(200)

          }
        }
      })

    } //------------
  }
}

封装后的代码：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Page2 {
  suzu: string[] = ['中国', '美国', '英国', '法国', '俄罗斯']
  @State setSele: Array<boolean> = new Array(this.suzu.length).fill(false)

  build() {
    Column({ space: 10 }) { //----------
      ForEach(this.suzu, (item: string, index: number) => {
        ListItem() {
            mydiyRadio({ item: item, setSele: this.setSele, index: index })
        }
      })

    } //------------
    .height(30)
    .width(200)
    .alignItems(HorizontalAlign.Start)
  }
}

//=============自定义单选框组件,源码来自 wb98.com
@Component
struct mydiyRadio {
  item: string = ''
  @State setSele: boolean[] = []
  index: number = 0

  build() {
    Row() {

      Radio({ value: 'radio1', group: 'group2' })
        .checked(this.setSele[this.index])
        .onChange((value: boolean) => {
          this.setSele[this.index] = value //直接点击多选框，就要让数组同步
          // promptAction.showToast({ message: '选中的是:' + this.item + ' ' + this.index })
        })

      Text(this.item)
        .focusable(false)// .backgroundColor(this.color1[index])
        .onClick(() => {
          // promptAction.showToast({ message: '新是:' + this.item + ' ' + this.index })
          for (let i = 0; i < this.setSele.length; i++) { //设置问题转为处理数组问题，所以必须先定义一个跟源大小相一致的数组
            if (i == this.index) { //设置单选框
              this.setSele[i] = !this.setSele[i]
            } else {
              this.setSele[i] = false
            }
          }
        })
    }
  }
}

响应式布局之媒体查询布局：横屏与竖屏状态的监控,arkts

Mon, 07 Jul 2025 14:11:55 +0800

将上篇文章修改一下，用于媒体查询之监控横屏与竖屏状态。代码如下：

import { mediaquery } from '@kit.ArkUI'; //导入媒体查询模块

@Entry
@Component
struct Page8 {
  @State message: string = '';
  @State backColor: Color = Color.White
  //通过 matchMediasync 接口设置媒体查询条件
  //横屏条件 -- 源码来自 wb98.com
  private listener0: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)')
  //竖屏条件
  private listener9: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(orientation: portrait)')

  aboutToAppear(): void {
    //所有监听绑定事件
    this.listener0.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Yellow
        this.message = 'landscape 横屏'
      }
    })

    this.listener9.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Green
        this.message = 'portrait 竖屏'
      }
    })
  }

  aboutToDisappear(): void {
    //解绑监听
    this.listener0.off('change')
    this.listener9.off('change')
  }

  build() {

    Column() {

      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Medium)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.backColor)

  }
}

一多开发，响应式布局之媒体查询布局，宽度监控，arkts

Mon, 07 Jul 2025 11:27:18 +0800

在实际应用开发过程中，开发者常常需要针对不同类型设备或同一类型设备的不同状态来修改应用的样式。媒体查询提供了丰富的媒体特征监听能力，可以监听应用显示区域变化、横竖屏、深浅色、设备类型等等，因此在应用开发过程中使用的非常广泛。

下面是媒体查询，监控宽度的变化。石川，arkts，鸿蒙，wb98.com

import { mediaquery } from '@kit.ArkUI'; //导入媒体查询模块

@Entry
@Component
struct Page8 {
  @State message: string = '';
  @State backColor: Color = Color.White
  //通过 matchMediasync 接口设置媒体查询条件
  //屏幕尺寸在320到600,sm,手机竖屏为sm,横屏就是md
  private listener: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(600vp>width>320vp)')
  // 屏幕尺寸小于320，xs,智能手表
  private listener1: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(width<320vp)')
  // 屏幕尺寸大于600，md,平板
  private listener2: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(width>600vp)')

  aboutToAppear(): void {
    //所有监听绑定事件 - wb98.com
    this.listener.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Yellow
        this.message = 'sm'
      }
    })

    this.listener1.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Red
        this.message = 'xs'
      }
    })

    this.listener2.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Green
        this.message = 'md'
      }
    })
  }

  aboutToDisappear(): void {
    //解绑监听 - wb86.com
    this.listener.off('change')
    this.listener1.off('change')
    this.listener2.off('change')
  }

  build() {

    Column() {

      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Medium)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.backColor)

  }
}