SwiftUI初级课程（二十三）Group/HStack/VStack/ZStack

薄衫岁月长

于 2023-01-02 19:12:22 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： SwiftUI初级教程文章标签： swiftui html ios

本文链接：https://blog.csdn.net/qyw2013/article/details/128523694

本文是SwiftUI初级课程的第二十三讲，重点介绍了Group、HStack、VStack和ZStack这四个关键布局组件的使用方法。通过实例讲解，帮助iOS开发者理解如何在SwiftUI中进行界面排列和组合，实现灵活的屏幕布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// Group/HStack/VStack/ZStack

struct ContentView: View {
    var body: some View {
//        //Group将多个预览画面，组成一个群组，每一个子视图，在右侧的预览窗口中，分别显示在独立的模拟器中。
//        Group {
//            Text("Hello Word")
//            Text("sc.i0905.com")
//            Text("www.i0905.com")
//            Text("www.1shipin.top")
//            Text("1shipin.top")
//        }//可以统一修改子视图的样式
//        .font(.largeTitle)
//        .foregroundColor(.orange)

//        HStack(alignment:.top,spacing: 40) {//水平方向上进行等距排列 子视图顶部边缘对齐  间距为40
//            Image(systemName: "book.fill")
//            Text("sc.i0905.com")
//            Spacer()//自动调整宽度，使Hstack内所有子视图，在水平方向上撑满整个屏幕
//            Image(systemName: "icloud.and.arrow.down")
//        }
//        .padding()

//        VStack(alignment:.center,spacing: 50) {//在垂直方向上进行等距排列 左对齐 垂直间距50
//            Text("sc.i0905.com")
//                .font(.largeTitle)
//            Image("xiake")
//            Text("两人都是中年,男的丰神俊朗,女的文秀清雅,衣衫飘飘,腰间都挂着