一、背景

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

二、问题

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

三、原因

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

flexShrink

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

四、解决方法

给row组件添加.flexShrink(0)

五、完整代码

@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 })}
}