【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 })
  }
}
相关推荐
Georgewu1 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉1 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu2 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi20004 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉4 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡8 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq95278 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹49 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界20 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
阿巴~阿巴~1 天前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos