【HarmonyOS NEXT】flexShrink属性

一、背景

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

二、问题

按钮是用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 })
  }
}
相关推荐
HarmonyOS_SDK2 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会2 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
周胡杰4 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶5 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶5 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少7 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
coder_pig21 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶21 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界1 天前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos