HarmonyOS 鸿蒙Next：自定义左中右布局，空间够时中间组件尽量居中

更新：

@Component
export struct NavigationBarLayout{
@Builder
doNothingBuilder() {
};
@BuilderParam
buildLeft:()=>void = this.doNothingBuilder
@BuilderParam
buildCenter:()=>void = this.doNothingBuilder
@BuilderParam
buildRight:()=>void = this.doNothingBuilder
onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {
// let startPos = 150;
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> left:Layoutable|<span class="hljs-literal"><span class="hljs-literal">undefined</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> center:Layoutable|<span class="hljs-literal"><span class="hljs-literal">undefined</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> right:Layoutable|<span class="hljs-literal"><span class="hljs-literal">undefined</span></span>


<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> index = <span class="hljs-number"><span class="hljs-number">0</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLeft !== <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.doNothingBuilder){
  left = children[index]
  index ++
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildCenter !== <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.doNothingBuilder){
  center = children[index]
  index ++
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildRight !== <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.doNothingBuilder){
  right = children[index]
  index ++
}

<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> leftBound = <span class="hljs-number"><span class="hljs-number">0</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> rightBound = selfLayoutInfo.width
<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (left){
  left.layout({ x: <span class="hljs-number"><span class="hljs-number">0</span></span>, y: (selfLayoutInfo.height-left.measureResult.height)/<span class="hljs-number"><span class="hljs-number">2</span></span> })
  leftBound = left.measureResult.width
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (right){
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> x = selfLayoutInfo.width - right.measureResult.width
  right.layout({
    x: x,
    y: (selfLayoutInfo.height-right.measureResult.height)/<span class="hljs-number"><span class="hljs-number">2</span></span> })
  rightBound = x
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (center){

  <span class="hljs-comment"><span class="hljs-comment">// 绝对中心</span></span>
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> centerBound = <span class="hljs-built_in"><span class="hljs-built_in">Math</span></span>.max(leftBound, selfLayoutInfo.width - rightBound)
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> centerWidth = selfLayoutInfo.width - centerBound * <span class="hljs-number"><span class="hljs-number">2</span></span>

  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (centerWidth&gt;center.measureResult.width){
    <span class="hljs-comment"><span class="hljs-comment">// 空间够，居中</span></span>
    center.layout({
      x: (selfLayoutInfo.width - center.measureResult.width)/<span class="hljs-number"><span class="hljs-number">2</span></span>,
      y: (selfLayoutInfo.height-center.measureResult.height)/<span class="hljs-number"><span class="hljs-number">2</span></span> })
  }
  <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
    <span class="hljs-comment"><span class="hljs-comment">// 空间不够</span></span>
    center.layout({
      x: leftBound + (rightBound - leftBound - center.measureResult.width)/<span class="hljs-number"><span class="hljs-number">2</span></span>,
      y: (selfLayoutInfo.height-center.measureResult.height)/<span class="hljs-number"><span class="hljs-number">2</span></span> })
  }

}
}
onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions) : SizeResult {
let result: SizeResult = {
width: 0,
height: 0
};
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> left:Measurable|<span class="hljs-literal"><span class="hljs-literal">undefined</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> center:Measurable|<span class="hljs-literal"><span class="hljs-literal">undefined</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> right:Measurable|<span class="hljs-literal"><span class="hljs-literal">undefined</span></span>


<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> index = <span class="hljs-number"><span class="hljs-number">0</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLeft !== <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.doNothingBuilder){
  left = children[index]
  index ++
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildCenter !== <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.doNothingBuilder){
  center = children[index]
  index ++
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildRight !== <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.doNothingBuilder){
  right = children[index]
  index ++
}

<span class="hljs-keyword"><span class="hljs-keyword">let</span></span> width = selfLayoutInfo.width

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (left){
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> childResult: MeasureResult = left.measure({
    maxWidth: <span class="hljs-built_in"><span class="hljs-built_in">Math</span></span>.min(width, selfLayoutInfo.width/<span class="hljs-number"><span class="hljs-number">2</span></span>),
    maxHeight: selfLayoutInfo.height })

  <span class="hljs-comment"><span class="hljs-comment">// result.height = Math.max(result.height, childResult.height)</span></span>
  width -= childResult.width
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (right){
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> childResult: MeasureResult = right.measure({
    maxWidth: <span class="hljs-built_in"><span class="hljs-built_in">Math</span></span>.min(width, selfLayoutInfo.width/<span class="hljs-number"><span class="hljs-number">2</span></span>),
    maxHeight: selfLayoutInfo.height })

  <span class="hljs-comment"><span class="hljs-comment">// result.height = Math.max(result.height, childResult.height)</span></span>
  width -= childResult.width
}

<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (center){
  <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> childResult: MeasureResult = center.measure({
    maxWidth: width,
    maxHeight: selfLayoutInfo.height })

  <span class="hljs-comment"><span class="hljs-comment">// result.height = Math.max(result.height, childResult.height)</span></span>
}


<span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">typeof</span></span> constraint.maxWidth == <span class="hljs-string"><span class="hljs-string">'number'</span></span>){
  result.width = constraint.maxWidth
}
<span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
  result.width = selfLayoutInfo.width
}

result.height = selfLayoutInfo.height
<span class="hljs-comment"><span class="hljs-comment">// result.height = 400;</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> result;
}
@Builder
builder(){
this.buildLeft()
this.buildCenter()
this.buildRight()
}
build() {
this.builder()
}
}
@Preview
@Component
struct NavigationBarLayoutPreview{
@Builder
buildLeft(){
Text(‘left’)
.backgroundColor(Color.Red)
}
@Builder
buildLongLeft(){
Text(‘leftleftleftleft’)
.backgroundColor(Color.Red)
}
@Builder
buildCenter(){
Text(‘center’)
.backgroundColor(Color.Yellow)
}
@Builder
buildLongCenter(){
Text(‘centercentercenter’)
.backgroundColor(Color.Yellow)
}
@Builder
buildRight(){
Text(‘Right’)
.backgroundColor(Color.Blue)
}
@Builder
buildLongRight(){
Text(‘RightRightRightRight’)
.backgroundColor(Color.Blue)
}
build() {
Column({space:8}){
NavigationBarLayout({
buildLeft:()=>{this.buildLeft()},
buildCenter:()=>{this.buildCenter()},
buildRight:()=>{this.buildRight()},
})
.height(50)
  NavigationBarLayout({
    buildLeft:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLongLeft()},
    buildCenter:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildCenter()},
    buildRight:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildRight()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)

  NavigationBarLayout({
    buildLeft:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLeft()},
    buildCenter:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildCenter()},
    buildRight:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildRight()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)

  NavigationBarLayout({
    buildLeft:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLeft()},
    buildCenter:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLongCenter()},
    buildRight:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLongRight()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)

  NavigationBarLayout({
    buildLeft:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLongLeft()},
    buildCenter:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLongCenter()},
    buildRight:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLongRight()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)

  NavigationBarLayout({
    buildCenter:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildCenter()},
    buildRight:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildRight()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)


  NavigationBarLayout({
    buildLeft:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLeft()},
    buildRight:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildRight()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)

  NavigationBarLayout({
    buildLeft:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildLeft()},
    buildCenter:()=&gt;{<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.buildCenter()},
  })
    .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)
}
.width(<span class="hljs-number"><span class="hljs-number">200</span></span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>