@Entry@Component struct FlexibleCapability1 {@StatesliderWidth:number=1000;// Bottom slider - adjust container size by dragging the slider.@Builderslider(){Slider({ value:this.sliderWidth, min:300, max:1000}).blockColor(Color.White).width('60%').onChange((value:number)=>{this.sliderWidth = value;}).position({ x:'20%', y:'80%'})}build(){Column(){Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }){// Distribute all extra space to the image using flexGrow and allocate all insufficient space to the side margins using flexShrink.Row().width(150).height(400).backgroundColor('#FFFFFF').flexGrow(0).flexShrink(1)Image($r('app.media.illustrator')).width(300).height(400).objectFit(ImageFit.Contain).backgroundColor('#66F1CCB8').flexGrow(1).flexShrink(0)Row().width(150).height(400).backgroundColor('#FFFFFF').flexGrow(0).flexShrink(1)}.width(this.sliderWidth)this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)}}
类 Web 开发范式中，通过将 div 组件的 justify-content 属性设置为 space-evenly 来实现均分布局。
示例：
父容器尺寸变化过程中，图标及文字的尺寸不变，图标间的间距及图标离左右边缘的距离同时均等改变。
@Entry@Component struct EquipartitionCapability {@Staterate:number=0.6;privatelist:number[]=[0,1,2,3];// Bottom slider - adjust container dimensions via slider drag interaction.@Builderslider(){Slider({ value:this.rate *100, min:30, max:60}).blockColor(Color.White).width('60%').height(50).onChange((value:number)=>{this.rate = value /100;}).position({ x:'20%', y:'80%'})}@BuilderItem(){Column(){Image($r('app.media.icon')).width(48).height(48).margin(({ top:8}))Text($r('app.string.show_app_name')).width(64).height(30).lineHeight(15).fontSize(12).textAlign(TextAlign.Center).margin({ top:8}).padding({ bottom:15})}.width(80).height(102)}build(){Row(){Column(){// Distribute remaining space evenly along the main axis of the parent container.Flex({ justifyContent: FlexAlign.SpaceEvenly }){ForEach(this.list,(item:number)=>{this.Item();},(item:number, index:number)=>JSON.stringify(item)+ index)}// Distribute remaining space evenly along the main axis of the parent container.Flex({ justifyContent: FlexAlign.SpaceEvenly }){ForEach(this.list,(item:number)=>{this.Item();},(item:number, index:number)=>JSON.stringify(item)+ index)}}.width(this.rate *100+'%').height(222).padding({ top:16}).backgroundColor('#FFFFFF').borderRadius(16)this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)}}
@Entry@Component struct ProportionCapability {@Staterate:number=0.5;// Bottom slider - adjust container size through slider drag interaction.@Builderslider(){Slider({ value:100, min:25, max:50}).blockColor(Color.White).width('60%').height(50).onChange((value:number)=>{this.rate = value /100;}).position({ x:'20%', y:'80%'})}build(){Row(){Row(){Column(){Image($r('app.media.down')).width(48).height(48)}.height(96)// Set the layout weight of child components along the main axis of the parent container..layoutWeight(1).justifyContent(FlexAlign.Center)Column(){Image($r("app.media.pause")).width(48).height(48)}.height(96).layoutWeight(1).backgroundColor('#66F1CCB8').justifyContent(FlexAlign.Center)Column(){Image($r("app.media.next")).width(48).height(48)}.height(96).layoutWeight(1).justifyContent(FlexAlign.Center)}.width(this.rate *100+'%').height(96).borderRadius(16).backgroundColor('#FFFFFF')this.slider()}.width('100%').height('100%').backgroundColor('#F1F3F5').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)}}
