HarmonyOS Stack布局中如何修改部分子视图的对齐方式

下面的示例代码中两个Row布局都是在右上角（因为设置了Alignment.TopEnd ），请问如何将第二个Row布局调整到Stack布局的中心？

目前我想到两个方式，一个是使用position进行绝对定位，但是感觉比较麻烦。另一个是给第二个Row外面再包一层和Stack一样大小的布局，然后指定中心对齐，但是这种方式会导致点击事件会被新增的这层布局拦下来。

请问是否有其他更优的实现方式？

build() { 
  Stack({ alignContent: Alignment.TopEnd }) { 
    Row() 
      .size({ width: '100', height: '100' }) 
      .backgroundColor(Color.Red) 
    Row() 
      .size({ width: '50', height: '50' }) 
      .backgroundColor(Color.Green) 
  }.width('100%').height('100%') 
}

HarmonyOS

zxjiu

2024-09-03 10:37:14

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

以下demo是否满足您的要求。

@Entry 
@Component 
struct StackPage { 
  @State message: string = 'Hello World'; 
 
  build() { 
    Column() { 
      Stack({ alignContent: Alignment.TopEnd }) { 
        Row(){ 
          Row() 
            .size({ width: '50', height: '50' }) 
            .backgroundColor(Color.Green) 
            .onClick(()=>{ 
              console.log('中心') 
            }) 
        } 
          .size({ width: '100', height: '100' }) 
          .backgroundColor(Color.Red) 
          .justifyContent(FlexAlign.Center) 
          .alignItems(VerticalAlign.Center) 
          .onClick(()=>{ 
            console.log('边缘') 
          }) 
      }.width('100%').height('100%') 
    } 
    .height('100%') 
    .width('100%') 
  } 
}

当Stack组件中有多个节点触摸区域重叠时，如两个节点，默认只会对显示在最上层的节点做触摸测试，若需要显示在下层的节点触发触摸测试，请给显示在上层的节点设置hitTestBehavior为HitTestMode.Transparent。

@Entry 
@Component 
struct StackPage { 
  @State message: string = 'Hello World'; 
 
  build() { 
    Stack({ alignContent: Alignment.TopEnd }) { 
      Row() 
        .size({ width: '100', height: '100' }) 
        .backgroundColor(Color.Red) 
        .onClick(()=>{ 
          console.log('点击了=>红色') 
        }) 
      Stack({ alignContent: Alignment.Center }){ 
        Row() 
          .size({ width: '50', height: '50' }) 
          .backgroundColor(Color.Green) 
          .onClick(()=>{ 
            console.log('点击了=>绿色') 
          }) 
      }.width('100%').height('100%').hitTestBehavior(HitTestMode.Transparent) 
    }.width('100%').height('100%') 
  } 
}

2024-09-03 17:36:41

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Stack布局中如何修改部分子视图的对齐方式

订阅鸿蒙技术特刊，精选内容抢先看