一、背景

希望達到的布局效果是文字與按鈕左右對齊，居中顯示，但實際效果中按鈕的顯示與效果不符，如下圖所示

二、問題

按鈕是用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 })}
}

?

?