[SwiftUI] HStack subview layout

Including HStack's common centering, filling, equalizing and squeezing

code:

import SwiftUI

struct MPMineView: View {
    
    var body: some View {
        VStack {
            /// 1.单个视图默认居中
            HStack {
                Label("单个", systemImage: "smallcircle.fill.circle")
                    .background(Color.red)
            }
            /// 2.单个视图拉满居左/居中/居右
            HStack {
                Label("单个", systemImage: "smallcircle.fill.circle").frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.red)

            }
            /// 3.多个视图默认居中
            HStack {
                Label("左侧", systemImage: "smallcircle.fill.circle")
                    .background(Color.red)
                
                Text("居中")
                    .background(Color.green)
                
                Text("右侧")
                    .background(Color.blue)
            }
            /// 4.多个视图等分
            HStack {
                Text("左侧").frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.red)
                
                Text("居中").frame(maxWidth: .infinity, alignment: .center)
                    .background(Color.green)
                
                Text("右侧").frame(maxWidth: .infinity, alignment: .trailing)
                    .background(Color.blue)
            }
            /// 5.左右挤压中间视图
            HStack {
                Label("左侧", systemImage: "smallcircle.fill.circle").frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.red)
                
                Text("居中")
                    .background(Color.green)
                
                Text("右侧").frame(maxWidth: .infinity, alignment: .trailing)
                    .background(Color.blue)
            }
            /// 6.左右挤压中间多个视图
            HStack {
                Text("左侧").frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.red)
                
                Text("居中1")
                    .background(Color.green)
                
                Text("居中2")
                    .background(Color.green)
                
                Text("右侧").frame(maxWidth: .infinity, alignment: .trailing)
                    .background(Color.blue)
            }
            /// 7.多个等分挤压某个视图
            HStack {
                Text("左侧").frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.red)
                
                Text("居中1").frame(maxWidth: .infinity, alignment: .center)
                    .background(Color.green)
                
                Text("居中2")
                    .background(Color.green)
                
                Text("右侧").frame(maxWidth: .infinity, alignment: .trailing)
                    .background(Color.blue)
            }
        }
    }
}

hint:

Guess you like

Origin blog.csdn.net/u012881779/article/details/129709729