HarmonyOS 折叠屏一多分屏怎么实现

折叠屏双屏时,主副屏怎么实现,比如点击主屏数据,在副屏展示数据

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以使用navigation实现,以下是文档中的案例demo:

class PageParam {
  constructor(num_: number) {
    this.num = num_;
  }
  num: number = 0;
}

@Component
struct PageOne {
  private stack: NavPathStack | null = null;
  private name: string = "";
  private paramNum: number = 0;

  build() {
    NavDestination() {
      Column() {
        Text("NavPathInfo: name: " + this.name + ", paramNum: " + this.paramNum)
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            if (this.stack) {
              let p = new PageParam(this.paramNum + 1);
              this.stack.pushPath({name: "pageOne", param: p});
            }
          })
        Button('pop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.stack?.pop()
          })
      }
      .width('100%')
      .height('100%')
    }
    .title('pageOne')
    .onReady((ctx: NavDestinationContext) => {
      // 在NavDestination中能够拿到传来的NavPathInfo和当前所处的NavPathStack
      try {
        this.name = ctx?.pathInfo?.name;
        this.paramNum = (ctx?.pathInfo?.param as PageParam)?.num;
        this.stack = ctx.pathStack;
      } catch (e) {
        console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`)
      }
    })
  }
}

@Entry
@Component
struct NavigationExample2 {
  private stack : NavPathStack = new NavPathStack();

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      PageOne()
    }
  }

  build() {
    Navigation(this.stack) {
      Stack({alignContent: Alignment.Center}) {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            let p = new PageParam(1);
            this.stack.pushPath({ name: "pageOne", param: p })
          })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .navDestination(this.PageMap)
    .title('Navigation')
  }
}

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#示例8

mode属性可以设置显示模式,可选择设置是分屏显示,还是单页面显示

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 组件布局怎么适配折叠
405浏览 • 1回复 待解决
一多断点怎么设置比较合理
1200浏览 • 1回复 待解决
如何区分折叠与非折叠手机?
369浏览 • 0回复 待解决
HarmonyOS 如何监听折叠展开折叠
112浏览 • 1回复 待解决
怎么折叠的titlebar实现
3981浏览 • 1回复 待解决
HarmonyOS 折叠适配资料
534浏览 • 1回复 待解决
HarmonyOS 折叠设备适配
48浏览 • 1回复 待解决
HarmonyOS 折叠状态获取
60浏览 • 1回复 待解决
如何实现折叠组件
1020浏览 • 1回复 待解决
HarmonyOS 应用怎么禁用分屏
45浏览 • 1回复 待解决
HarmonyOS 怎么禁用分屏模式
11浏览 • 1回复 待解决
HarmonyOS flutter如何适配折叠
31浏览 • 1回复 待解决
HarmonyOS 折叠webview宽度问题
481浏览 • 1回复 待解决
HarmonyOS uniapp如何适配折叠
18浏览 • 1回复 待解决