【HarmonyOS NEXT】flexShrink属性

奔跑的露西ly2024-12-07 21:26

一、背景

希望达到的布局效果是文字与按钮左右对齐，居中显示，但实际效果中按钮的显示与效果不符，如下图所示

二、问题

按钮是用row组件包裹的text，左右padding给的是一样的大小，但是明显右边padding会比左边padding大很多

三、原因

外层使用的flex包裹text与row，主要是为了解决文字过多时，按钮超出布局的问题，但是flex布局内使用row组件，需要给其row添加flexShrink属性

flexShrink

设置父容器压缩尺寸分配给此属性所在组件的比例。当父容器为Column、Row时，需设置主轴方向的尺寸。

四、解决方法

给row组件添加.flexShrink(0)

五、完整代码

javascript 复制代码

@Entry
@Component
struct Index {
  build() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Text('设置父容器压缩尺寸分配给此属性所在组件的比例。当父容器为Column、Row时，需设置主轴方向的尺寸')
        .fontSize(12)
        .fontWeight(400)
        .fontColor('#222427')
        .lineHeight(19)
        .margin({ right: 8 })


      Row() {
        Text('修改按钮')
          .fontSize(12)
          .fontWeight(400)
          .fontColor(Color.White)
      }
      .flexShrink(0)
      .padding({
        left: 13,
        right: 13,
        top: 6,
        bottom: 6
      })
      .backgroundColor('#0165b8')
      .borderRadius(4)
    }
    .backgroundColor('#dfeefd')
    .padding({
      left: 12,
      right: 12,
      top: 8,
      bottom: 8
    })
    .margin({ top: 20 })
  }
}