专栏首页韦弦的偶尔分享SwiftUI 布局:Group 充当透明的布局容器

SwiftUI 布局:Group 充当透明的布局容器

SwiftUI的 Group 视图通常用于解决10个子视图的限制,但是它还有另一个重要的行为:它充当透明的布局容器。这意味着您可以在一个组内创建一系列视图,然后将该组包装在不同的堆栈中以获得不同的行为。

例如,此UserView具有一个包含三个文本视图的Group

struct UserView: View {
    var body: some View {
        Group {
            Text("Name: 韦弦")
            Text("Country: 中国")
            Text("Pets: 六一")
        }
    }
}

该组不包含布局信息,因此我们不知道这三个文本字段是垂直,水平还是按深度堆叠。这是Group透明布局行为变得重要的地方:无论放置在哪个父视图里,UserView都会由其父视图决定如何安排其文本视图。

例如,我们可以这样创建一个ContentView

struct ContentView: View {
    @State private var layoutVertically = false

    var body: some View {
        Group {
            if layoutVertically {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        }
        .onTapGesture {
            self.layoutVertically.toggle()
        }
    }
}

每次点击组时,就会在垂直和水平布局之间切换。

您可能想知道您需要多久使用一次这样的替代布局,但是答案可能会让您感到惊讶:这真的很普遍!您会看到,这正是SizeClass 布局要发生的事情,因为您可以编写代码以在水平空间很大时显示水平布局,而在空间减小时切换到垂直布局。

因此,我们可以像这样重写前面的示例:

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var sizeClass

    var body: some View {
        Group {
            if sizeClass == .compact {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        }
    }
}

提示:在这种情况下,堆栈中只有一个视图并且不带任何参数,可以将视图的初始化程序直接传递给VStack,以缩短代码长度:

if sizeClass == .compact {
    VStack(content: UserView.init)
} else {
    HStack(content: UserView.init)
}

我知道短代码不是全部,但是当您使用这种方法对视图布局进行分组时,它非常简洁。

译自 Using groups as transparent layout containers

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hacking with iOS: SwiftUI Edition 里程碑(一)之 What you learned?

    你现在已经完成了前两个SwiftUI项目,并且也完成了一个技术项目——两个应用程序和一个技术项目的节奏将持续到课程结束,这将帮助你快速提升知识,同时花时间回顾和...

    韦弦zhy
  • SwiftUI-开发iOS项目

    Xcode 11 + macOS 10.15 可以实时预览 SwiftUI 实现的界面,这个预览可以帮助我们快速查看代码对应的效果而不需要运行。

    YungFan
  • SwiftUI 中布局的工作原理

    所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下:

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition - 里程碑:项目 10 - 12

    这最后三个项目确实推动了数据的开发,首先是通过互联网发送和接收数据,然后进入Core Data,以便您可以了解实际应用如何管理其数据。您在此项目中学到的技能也许...

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition - SnowSeeker 项目(二)

    SwiftUI为我们提供了两个环境值来监视应用程序的当前size class,这实际上意味着在空间有限时可以显示一种布局,在空间足够时可以显示另一种布局。

    韦弦zhy
  • 干货 | 关于SwiftUI,看这一篇就够了

    梁启健,携程金融支付中心开发工程师,主要负责支付iOS端的开发与优化工作,喜欢研究大前端和跨平台技术。

    携程技术
  • WWDC - SwiftUI - 初恋般的感觉

    要在Xcode中预览画布上的视图并与之交互,请确保您的Mac运行的是macOS 10.15 beta版。

    iOSSir
  • IOS Widget(3):SwiftUI开发小组件布局入门

      经过上一篇文章,我们已经可以在桌面上展示出一个小组件出来了,你肯定想小试牛刀,动手改一改,那我们就从改小组件的布局做起吧。本文不会讲解Swift语法,如果是...

    用户1155943
  • SwiftUI:特定的可访问性需求

    SwiftUI为我们提供了许多环境属性,这些属性描述了用户的自定义可访问性设置,值得花些时间阅读并关注这些设置。

    韦弦zhy

扫码关注云+社区

领取腾讯云代金券