HarmonyOS鸿蒙Next中这种的布局用什么组件？

HarmonyOS鸿蒙Next中这种的布局用什么组件？

本来想用Stack，可是Stack好像没有子组件单独align的方法？用RelativeContainer的话放在Row里边RelativeContainer的宽度拉满了，设置auto也没管用。

这种的不说比Android了，比Flutter都费劲很多啊

cke_825.png


更多关于HarmonyOS鸿蒙Next中这种的布局用什么组件？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

不知道楼主是不是想要这种效果，已经给楼主改好了。

另外，在鸿蒙中建议长度单位写为’vp’(虚拟像素，vp单位可省略)， lpx 是逻辑像素单位

示例：

.height('60vp')   // 等效 >   .height(60)

image.png

@Builder
function selectionLineItem(params: SelectionLineItemParams) {
  Column({ space: 5 }) {

    Button(params.text)
      .height('60lpx')
      .fontSize('28lpx')
      .fontColor(params.selected ? Color.White : Color.Orange)
      .fontWeight(params.selected ? FontWeight.Bold : FontWeight.Normal)
      .backgroundColor(params.selected ? Color.Orange : Color.Transparent)

    if (params.onDeleteClick != undefined) {
      Image($r('app.media.delete_red'))
        .width('30lpx')
        .height('30lpx')
        .borderRadius('15lpx')
        .position({ top: '-15lpx', right: 0 })
        .onClick(params.onDeleteClick)
    }

    if (params.showBottomIndicator && params.selected) {
      Image($r('app.media.selected_arrow_white'))
        .width('20lpx')
        .height('15lpx')
        .onClick(params.onDeleteClick)
    }
  }
  .onClick(params.onClick)
}

更多关于HarmonyOS鸿蒙Next中这种的布局用什么组件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


只要思想不滑坡，办法总比困难多。没办法，RelativeContainer是真难用。只能多想点组合办法，大不了，Stack中再包一个Stack。

右上角删除可以postion，下面那个三角形的应该可以

删除用position({ top: 0, right: 0 })可以，三角用position({ bottom: 0, left:0, right: 0 })的话它是靠左下角了，有点奇怪，我设置Stack成Alignment.Center，三角只用bottom也是左下角，

同时left:0和right：0肯定不行，只能设置一个。直接设置left:10这种，

楼主你好，请看一下 Badge 组件和 position 绝对定位与 offset 相对偏移。

标题

能解决部分问题，三角好像没法放，

子标题

  • 列表项1
  • 列表项2
  • 列表项3

套了3层Stack实现了。。。

@Builder
function selectionLineItem(params: SelectionLineItemParams) {
  Stack() {
    Stack() {
      Stack() {
        Text(params.text)
          .fontSize('28lpx')
          .fontColor(params.selected ? Color.White : appTheme.colors.tipText)
          .fontWeight(params.selected ? FontWeight.Bold : FontWeight.Normal)
      }
      .alignContent(Alignment.Center)
      .height('60lpx')
      .padding({ left: '38lpx', right: '38lpx' })
      .borderRadius('30lpx')
      .backgroundColor(params.selected ? appTheme.colors.primary : Color.Transparent)
      .onClick(params.onClick)

      if (params.onDeleteClick != undefined) {
        Image($r('app.media.delete_red'))
          .width('30lpx')
          .height('30lpx')
          .offset({ top: '-15lpx', right: '-15lpx' })
          .onClick(params.onDeleteClick)
      }
    }
    .padding({ top: '15lpx', right: '15lpx' })
    .alignContent(Alignment.TopEnd)

    if (params.showBottomIndicator && params.selected) {
      Image($r('app.media.selected_arrow_white'))
        .width('20lpx')
        .height('15lpx')
        .margin({ top: '80lpx' })
        .onClick(params.onDeleteClick)
    }
  }
  .alignContent(Alignment.Top)
  .height(params.showBottomIndicator ? '95lpx' : '75lpx')
}

在HarmonyOS Next中实现该布局建议使用Column、Row、Stack等ArkUI组件组合。Column用于纵向排列子组件，Row用于横向排列，Stack用于层叠布局。可配合Flex弹性布局、Grid网格布局或List列表组件使用。具体组件选择取决于实际布局结构，需结合Position定位、Margin/Padding间距等样式属性调整。ForEach循环渲染适用于动态内容展示。

在HarmonyOS Next中实现这种布局，推荐使用Flex组件配合Stack的组合方案。具体分析如下：

  1. 对于图片+文字的叠加效果，仍然建议使用Stack作为容器，通过绝对定位控制子组件位置：
Stack({ alignContent: Alignment.BottomStart }) {
  Image()
    .width('100%')
  
  Column() {
    Text('标题').fontSize(16)
    Text('副标题').fontSize(12)
  }.margin({ bottom: 10, left: 10 })
}
  1. 当需要横向排列多个这样的卡片时，使用Flex布局比Row更灵活：
Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
  ForEach(this.cardData, (item) => {
    Stack() {
      // 卡片内容
    }.width('45%').margin(5)
  })
}
  1. 关键点说明：
  • 通过Stack的alignContent属性控制整体对齐
  • 子组件使用margin/padding实现精确定位
  • Flex布局的wrap属性可实现自动换行
  • 百分比宽度适配不同屏幕

这种方案避免了RelativeContainer的复杂度，同时解决了Row布局的宽度问题。Flutter的Stack确实有更灵活的定位方式，但HarmonyOS的Stack+Flex组合也能达到类似效果。

回到顶部