HarmonyOS 如何获取到Navigation分栏下的各自的宽度

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

参考代码和文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5

Navigation() {
  TextInput({ placeholder: 'search...' })
    .width("90%")
    .height(40)
    .backgroundColor('#FFFFFF')

  List({ space: 12 }) {
    ForEach(this.arr, (item) => {
      ListItem() {
        NavRouter() {
          Text("NavRouter" + item)
            .width("100%")
            .height(72)
            .backgroundColor('#FFFFFF')
            .borderRadius(24)
            .fontSize(16)
            .fontWeight(500)
            .textAlign(TextAlign.Center)
          NavDestination() {
            Text("NavDestinationContent" + item)
          }
          .title("NavDestinationTitle" + item)
        }
      }
    }, item => item)
  }
  .width("90%")
  .margin({ top: 12 })
}
.title("主标题")
.mode(NavigationMode.Split)
.menus([
  {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
  {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
  {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
])
.toolBar({items: [
  {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
  {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
]})
}
.height('100%')
  .width('100%')
  .backgroundColor('#F1F3F5')
}

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
有没有接口能获取到组件宽度
1069浏览 • 1回复 待解决
HarmonyOS 关于分栏断点优化问题
38浏览 • 1回复 待解决
HarmonyOS 如何获取组件宽度
506浏览 • 1回复 待解决
如何获取当前组件宽度
419浏览 • 1回复 待解决
请问如何获取窗口宽度
1993浏览 • 1回复 待解决
如何获取当前设备宽度
863浏览 • 1回复 待解决
如何获取主窗口window宽度
2195浏览 • 1回复 待解决
如何获取当前窗口宽度
621浏览 • 1回复 待解决
请教一关于应用分栏实现
1093浏览 • 1回复 待解决