【SwiftUI】UI要素をなるべく中央にキープする

やり方はいろいろあると思うが、私がやった方法を書いておく。

求めるもの

真ん中のものは真ん中に

真ん中が長くなったら左右のものを狭くする

さらに真ん中が長くなっても左右の最低の領域は確保する

では始める。

真ん中に配置

HStack {
    ZStack(alignment: .leading) {
        Rectangle()
            .foregroundStyle(.clear)
            .frame(height: 1.0)
        Text("短い左")
    }
    
    Text("真ん中")
    
    ZStack(alignment: .trailing) {
        Rectangle()
            .foregroundStyle(.clear)
            .frame(height: 1.0)
        Text("長い長い長い右")
    }
}

このやり方は短いものを真ん中にするとちょうどいいが、長いものだと下のようになる。実は真ん中は主役なのできれいに表示したい。

真ん中のlayoutPriorityを1に

真ん中のlayoutPriorityを1にするとこうなる。layoutPriorityはデフォルトが0なので、真ん中を1にすると左右のものより高くなる。

HStack {
    ZStack(alignment: .leading) {
        Rectangle()
            .foregroundStyle(.clear)
            .frame(height: 1.0)
        Text("短い左")
    }
    
    Text("長い長い長い長い長い長い長い長い真ん中")
    .layoutPriority(1.0) //⭐️
    
    ZStack(alignment: .trailing) {
        Rectangle()
            .foregroundStyle(.clear)
            .frame(height: 1.0)
        Text("長い長い長い右")
    }
}

しかし 左右のものは最低の値を確保したい。

左右のものに最低の領域を確保

HStack {
    ZStack(alignment: .leading) {
        Rectangle()
            .foregroundStyle(.clear)
            .frame(height: 1.0)
        Text("短い左")
    }
    .frame(minWidth: 60.0) //⭐️
    
    Text("長い長い長い長い長い長い長い長い真ん中")
        .layoutPriority(1.0)
    
    ZStack(alignment: .trailing) {
        Rectangle()
            .foregroundStyle(.clear)
            .frame(height: 1.0)
        Text("長い長い長い右")
    }
    .frame(minWidth: 60.0) //⭐️
}

真ん中は長くなるが左右のものがこれ以上狭くなれないなら真ん中はそこで拡大を終える。