【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 })
  }
}
相关推荐
周胡杰1 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker15 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos