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

发布于 1周前 作者 h691938207 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 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 鸿蒙Next Flex左右布局时，右边如果有文字，文字则会出现问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
请尝试这个demo： 
[@Entry](/user/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店通用 【周末加假日同意】 spa写够仲夏之夜，某平人气王商户爆款推荐！99羽安枪弹人按摩项目二选一！传承五推销，放下警长的思绪与疲惫的身体！安科技示范户江苏分公司尽快发给v阿斯蒂芬就")


          .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)


  }


}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next Flex左右布局时，右边如果有文字，文字则会出现问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next Flex布局中，如果遇到右边有文字显示问题的情况，通常是由于布局配置或文本控件属性设置不当所导致。

  1. 检查Flex容器属性：

    • 确保Flex容器的flex-direction属性正确设置为row（表示水平布局）。
    • 检查justify-content和align-items属性，确保它们不会干扰右边文字的显示（例如，justify-content: space-between可能会导致右边元素被推向容器边缘，如果右边是固定宽度的文字控件，则可能出现显示问题）。

  2. 检查文本控件属性：

    • 确保文本控件的宽度设置合理，如果设置为固定宽度且内容超出，则可能出现显示不全或溢出问题。
    • 检查文本控件的overflow属性，如果设置为hidden，则超出部分将被隐藏。
    • 文本控件的text-align属性应设置为right（如果需要文字右对齐）。

  3. 调试与验证：

    • 使用开发者工具查看布局层次，确保Flex容器和文本控件的嵌套关系正确。
    • 检查是否有其他样式或属性（如padding、margin）影响了文本控件的显示。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部