SwiftUI基础之HStack用法详解

WeChat2ee65729e301ed1e95e16c86d75447fa.png

struct ContentView: View {
    var body: some View {
        ///水平排列的静态列表
//        HStack (spacing: 10){
//            Spacer()
//                .frame(width: 50, height: 50)
//                .background(Color.red)
//                .cornerRadius(25)
//                .overlay(
//                    RoundedRectangle(cornerRadius: 25)
//                            .stroke(lineWidth: 4)
//                            .foregroundColor(.blue)
//                )
//
//            Text("Hello, World!")
//            Spacer()
//        }.padding()
        VStack {
            HStackCaseItem(alignment: .top)//子视图局顶部对齐
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .bottom)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .center)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .firstTextBaseline)
            Spacer().frame(height: 20)
            HStackCaseItem(alignment: .lastTextBaseline)
            
            CircleRow()//利用 padding 让 HStack 的视图重叠效果
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct HStackCaseItem: View {
    let alignment: VerticalAlignment
    
    var body: some View {
        HStack(alignment: alignment, spacing: 20) {
            Text("A\nB")
                .frame(width: 50)
                .background(Color.yellow)
            
            Text("\(alignment.name)\nhello\nworld\n0ldBirds")
                .foregroundColor(.white)
                .frame(width: 150)
                .background(Color.red)
                .padding([.bottom, .top])
                .background(Color.red.opacity(0.5))
            
            Text("oldBirds")
                .background(Color.green)
                .foregroundColor(.white)
        }.background(Color.gray)
    }
}

extension VerticalAlignment {
    var name: String {
        switch self {
        case .top:
            return "top"
        case .bottom:
            return "bottom"
        case .center:
            return "center"
        case .firstTextBaseline:
            return "firstTextBaseline"
        case .lastTextBaseline:
            return "lastTextBaseline"
        default:
            return "other"
        }
    }
}

struct CircleRow:View {
    let colors = [Color.red, Color.yellow, Color.purple]
    var body: some View {
        HStack {
            ForEach(0..<3) { (index) in
                Circle()
                    .strokeBorder(Color.white, lineWidth: 2)
                    .shadow(color: .black, radius: 5, x: 1, y: 1)
                    .background(Circle().foregroundColor(colors[index]))
                    .frame(width: 100, height: 100)
                    .padding(.leading, -30)
            }
        }
    }
}

如果本文对你有帮助，欢迎点赞、评论、收藏…