CornerStacks 提供了一种简单的方法，可以在父视图的四个角上布局 SwiftUI 视图。 它通过包装 HStack 和 VStack 来实现，其直接的实现方式是将 HStack 和 VStack 与一些 Spacer 结合起来，从而为每个角落视图生成所需的布局。 主要目的是减少样板代码设置，提高代码可读性并实现快速原型设计。 John Sundell 在这个视频中很好地解释了这种布局技术。
- iOS 13.0+ / macOS 10.15+ / tvOS 13.0+ / watchOS 6.0+
- Xcode 11.0+
- Swift 5.1+
I. 在 Xcode 中自动安装
- 点击 File > Swift Packages > Add Package Dependency...
- 使用包 URL
https://github.com/filiplazov/CornerStacks将CornerStacks添加到您的项目中。
II. 在您的 Package.swift 文件中手动添加
.package(url: "https://github.com/filiplazov/CornerStacks", from: "0.1.0")
在使用任何视图之前，请确保导入 CornerStacks 模块
import CornerStacks
为 HStack 和 VStack 定义了 4 个视图，分别代表 4 个角。
HStack
TopLeadingHStack (顶部前导HStack)TopTrailingHStack (顶部后置HStack)BottomLeadingHStack (底部前导HStack)BottomTrailingHStack (底部后置HStack)
VStack
TopLeadingVStack (顶部前导VStack)TopTrailingVStack (顶部后置VStack)BottomLeadingVStack (底部前导VStack)BottomTrailingVStack (底部后置VStack)
示例
通过一个示例更容易解释
var body: some View {
ZStack {
// just like a normal HStack you can place many nested views
TopLeadingHStack {
makeSquare(size: 80)
makeSquare(size: 80)
}
// spacing is passed along to the wrapped HStack and VStack
TopTrailingVStack(spacing: 30) {
makeSquare(size: 80)
makeSquare(size: 80)
}
// horizontal alignment is passed along to the wrapped VStack
BottomLeadingVStack(alignment: .leading) {
makeSquare(size: 40)
makeSquare(size: 80)
}
// vertical alignment passed along to the wrapped VStack
BottomTrailingHStack(alignment: .top) {
makeSquare(size: 80)
makeSquare(size: 40)
}
// it also works in nested views like other VStacks and HStacks
HStack {
TopLeadingHStack {
makeSquare(size: 40)
}
BottomTrailingVStack {
makeSquare(size: 40)
makeSquare(size: 40)
}
}
.frame(width: 200, height: 150)
.background(Color.black)
}
}
这是上面代码的输出
非常欢迎贡献。 请在提交拉取请求之前创建一个 GitHub issue 来规划和讨论实现。
CornerStacks 在 MIT 许可证下可用。 有关更多信息，请参阅 LICENSE 文件。