SwiftUI基础学习日记（八）布局

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

大家好，我是小黑，一个还没秃头的程序员~~~

今天开始介绍swiftUI中常用的几种布局

• HStack
• VStack
• ZStack
• LazyHStack
• LazyVStack

话不多说，正文开始：

(一)HStack

HStack可以将其子节点排列在水平线上。

init(alignment: VerticalAlignment, spacing: CGFloat?, content: () -> Content)

属性/修饰符	说明
alignment	对齐子视图，子视图都会有相同的垂直屏幕坐标。
spacing	相邻子视图之间的距离
conten	堆栈中的视图

与LazyHStack不同的是，LazyHStack只在你的应用程序需要在屏幕上显示视图时才呈现视图，HStack一次呈现所有的视图，不管它们是在屏幕上还是在屏幕外。当你有少量的子视图或者不想要“惰性”版本的延迟渲染行为时，使用常规的HStack。 下面的例子展示了5个文本视图的简单水平堆栈:

var body: some View {
    HStack(
        alignment: .top,
        spacing: 10
    ) {
        ForEach(
            1...5,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

（二）VStack

VStack将其子节点排列在垂直直线上

init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, content: () -> Content)

属性/修饰符	说明
alignment	对齐子视图，子视图都会有相同的垂直屏幕坐标。
spacing	相邻子视图之间的距离
conten	堆栈中的视图

与LazyVStack不同的是，LazyVStack只在你的应用程序需要在屏幕上显示它们的时候才呈现视图，VStack一次呈现所有的视图，不管它们是在屏幕上还是在屏幕外。当你有少量的子视图或不想要“延迟”版本的延迟呈现行为时，使用常规的VStack。 下面的例子展示了一个由10个文本视图组成的简单垂直堆栈:

var body: some View {
    VStack(
        alignment: .leading,
        spacing: 10
    ) {
        ForEach(
            1...10,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

（三）ZStack

ZStack上的视图表现为后来的子视图将覆盖在之前的视图上，可以用于实现无法进行嵌套的控件布局

init(alignment: Alignment = .center, content: () -> Content)

属性/修饰符	说明
alignment	在两个轴上对齐堆栈中的子视图
conten	堆栈中的视图

下面的例子中将实现一个搜索框，由图标、输入框构成

ZStack{
                    HStack{
                        Image("search")
                        
                        TextField("输入需要搜索的内容", text:binding).font(.subheadline)
                        Spacer()
                    }.padding(.leading,10).frame(height:40).cornerRadius(20).overlay(
                        RoundedRectangle(cornerRadius: 20, style: .continuous)
                            .stroke(Color.color_gray_border, lineWidth: 1)
                    )
                }.padding(10)

今天的swiftUI学习分享就到这里，后面我会持续输出iOS开发笔记，感谢大家的阅读！大家晚安！