【每日学点 HarmonyOS Next 知识】底部弹窗、对话框不弹出、多模块间跳转、输入框不显示内容、Grid 编辑顺序

2025-03-12
北京
本文字数：3437 字
阅读完需：约 11 分钟

1、HarmonyOS 如何实现底部弹窗效果？

宽度占据屏幕宽度（自定义弹窗方式 @CustomDialog 默认并没有占据百分百宽度有间隙）

底部对齐屏幕底部（自定义弹窗的定义也没有到底距离底部有间隙）

目前 CustomDialog 不支持修改左右和下方边距，可通过半模态转场来实现，请参考取下代码：

@Entry@Componentstruct BindSheetDemo {  // 半模态转场显示隐藏控制  @State isShowSheet: boolean = false;  private menuList: string[] = ['不要辣', '少放辣', '多放辣', '不要香菜', '不要香葱', '不要一次性餐具', '需要一次性餐具'];
  // 通过@Builder构建半模态展示界面  @Builder  mySheet() {    Column() {      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {        ForEach(this.menuList, (item: string) => {          Text(item)            .fontSize(16)            .fontColor(0x333333)            .backgroundColor(0xf1f1f1)            .borderRadius(8)            .margin(10)            .padding(10)        })      }      .padding({ top: 18 })    }    .width('100%')    .height('100%')    .backgroundColor(Color.White)  }
  build() {    Column() {      Text('口味与餐具')        .fontSize(28)        .padding({ top: 30, bottom: 30 })      Column() {        Row() {          Row()            .width(10)            .height(10)            .backgroundColor('#a8a8a8')            .margin({ right: 12 })            .borderRadius(20)
          Column() {            Text('选择点餐口味和餐具')              .fontSize(16)              .fontWeight(FontWeight.Medium)          }          .alignItems(HorizontalAlign.Start)
          Blank()
          Row()            .width(12)            .height(12)            .margin({ right: 15 })            .border({              width: { top: 2, right: 2 },              color: 0xcccccc            })            .rotate({ angle: 45 })        }        .borderRadius(15)        .shadow({ radius: 100, color: '#ededed' })        .width('90%')        .alignItems(VerticalAlign.Center)        .padding({ left: 15, top: 15, bottom: 15 })        .backgroundColor(Color.White)
        .bindSheet(this.isShowSheet, this.mySheet(), {          height: 300,          dragBar: false,          onDisappear: () => {            this.isShowSheet = !this.isShowSheet;          }        })        .onClick(() => {          this.isShowSheet = !this.isShowSheet;        })      }      .width('100%')    }    .width('100%')    .height('100%')    .backgroundColor(0xf1f1f1)  }}

复制代码

2、HarmonyOS class 中创建对话框不能显示？

在 classs 里面创建了一个对话框，结果显示不出来，在 class 中添加 dialog 无法显示。

目前 customDialog 不支持在封装的类中弹出，可以参考该链接实现替代方案：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md#promptactionopencustomdialog11

3、HarmonyOS 多模块间是怎样跳转的？

首页是 mainPage，它有三个 Tab，各自引用模块 A、B、C。在 C 页面会判断登录状态，没有登录会有个登录入口，点登录想跳在 mainPage 跳到登录页。这个要怎么实现。

如果是 har 模块的路由跳转则需要使用命名路由的方式。

请参考资料中的示例：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5#%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1

在开发中为了跳转到共享包 HAR 或者 HSP 中的页面（即共享包中路由跳转），可以使用 router.pushNamedRoute 来实现。

4、HarmonyOS 输入框不显示内容？

PageA 里面有组件 B 组件 B 使用 TextInput，第一次进来时候不显示内容，输入才显示

参考以下示例代码引用 TextInput 自定义组件

@Componentstruct TextInputComponent {  @Link text: string  controller: TextInputController = new TextInputController()
  build() {    Column({ space: 20 }) {      TextInput({        text: this.text,        placeholder: '请输入手机号',        controller:this.controller      })        .placeholderColor(Color.Gray)        .placeholderFont({ size: 14, weight: 400 })        .width(300)        .type(InputType.Number)        .borderWidth(0)        .backgroundColor(Color.Transparent)        .fontSize(16)        .maxLength(11)        .maxLines(1)        .padding(5)        .inputFilter("[0-9]")        .onChange((value) => {          this.text = value        })    }    .width('100%')    .justifyContent(FlexAlign.Center)  }}
@Entry@Componentstruct ParentComponent {  @State param : string = '13670187134'  build() {    Column() {      TextInputComponent({text:this.param});      Divider().height(10)      Text('输入框的内容:'+this.param)    }  }}

复制代码

5、HarmonyOS 使用 Grid 组件开发可编辑顺序的功能，在拖拽 item 时如何设置其他组件顺序改变的动画效果？

使用 Grid 组件开发可编辑顺序的功能，在拖拽 item 时如何设置其他组件顺序改变的动画效果

grid 拖拽，动画加个虚化就行。

grid 组件下设置属性 editMode(true)设置 Grid 是否进入编辑模式，进入编辑模式可以拖拽 Grid 组件内部 GridItem。
在 onItemDragStart 回调中设置拖拽过程中显示的图片
在 onItemDrop 中获取拖拽起始位置，和拖拽插入位置，在 onDrag 回调中完成交换数组位置逻辑。

@Entry@Componentstruct GridExample {  @State numbers: String[] = [];  scroller: Scroller = new Scroller();  @State text: string = 'drag';
  @Builder pixelMapBuilder() { //拖拽过程样式    Column() {      Text(this.text)        .fontSize(16)        .backgroundColor(0xF9CF93)        .width(80)        .height(80)        .textAlign(TextAlign.Center)    }  }
  aboutToAppear() {    for (let i = 1;i <= 15; i++) {      this.numbers.push(i + '');    }  }
  changeIndex(index1: number, index2: number) { //交换数组位置    [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];  }
  build() {    Column({ space: 5 }) {      Grid(this.scroller) {        ForEach(this.numbers, (day: string) => {          GridItem() {            Text(day)              .fontSize(16)              .backgroundColor(0xF9CF93)              .width(80)              .height(80)              .textAlign(TextAlign.Center)              .onTouch((event: TouchEvent) => {                if (event.type === TouchType.Up) {                  this.text = day;                }              })          }        })      }      .columnsTemplate('1fr 1fr 1fr')      .columnsGap(10)      .rowsGap(10)      .onScrollIndex((first: number) => {        console.info(first.toString());      })      .width('90%')      .backgroundColor(0xFAEEE0)      .height(300)      .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。        return this.pixelMapBuilder(); //设置拖拽过程中显示的图片。      })      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。        console.info('tag' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置        this.changeIndex(itemIndex, insertIndex)      })    }.width('100%').margin({ top: 5 })  }}