HarmonyOS Flex左右布局时，右边如果有文字，文字则会出现问题

1.使用Row时，左边图片宽度固定时，右边文字被挤出容器

2.使用Flex时，左边图片宽度固定时，右边文字覆盖在左侧图片容器上

@Builder
GoodsListWidget() {
  List() {
    ListItemGroup({ header: this.ListHead(), space: '24lpx' }) {
      ForEach(this.goodsList, (item: GoodsModel) => {
        ListItem() {
          Row() {
            Column() {
              Image(item.Img)
                .width('210lpx')
                .height('100%')
                .borderRadius('16lpx')
            }
            .width('210lpx')
            .height('210lpx')

            Column() {
              Text(item.Name)
                .fontSize('28lpx')
                .fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Start)
                .border({ width: 1 })
                .width('100%')
              Text(item.Price + '')
                .fontSize('28lpx')
                .fontWeight(FontWeight.Bold)
            }
            .flexGrow(1)
            .alignItems(HorizontalAlign.Start)
            .backgroundColor(Color.Pink)
          }
          .width('100%')
          .padding('24lpx')
          .borderRadius('16lpx')
          .backgroundColor(Color.White)
        }
      }, (item: GoodsModel) => item.ID?.toString())
    }
  }
  .sticky(StickyStyle.Header)
  .edgeEffect(EdgeEffect.None)
  .width('100%')
  .height('100%')
  .padding({ left: '24lpx', right: '24lpx', bottom: '24lpx' })
  .scrollBar(BarState.Off)
  .nestedScroll({
    scrollForward: NestedScrollMode.PARENT_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  })
}

HarmonyOS

Excelsior_abit

2024-12-24 16:29:46

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

请尝试这个demo：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Flex() {
      Image($r("app.media.background"))
        .width('240lpx')
          // .height('100%')
        .borderRadius('16lpx')
      Column() {
        Text("[SPA足疗按摩]，6店通用 【周末加假日同意】 ")
          .fontSize('28lpx')
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Start)
          .border({ width: 1 })
        Text("648")
          .fontSize('28lpx')
          .fontWeight(FontWeight.Bold)
      }
      .alignItems(HorizontalAlign.Start)
      .backgroundColor(Color.Pink)
    }
    .width('100%')
    .padding('24lpx')
    .borderRadius('16lpx')
    .backgroundColor(Color.White)
  }
}

2024-12-24 17:49:44

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Flex左右布局时，右边如果有文字，文字则会出现问题

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