D1 View - ly918/SwiftUI-Chinese-Documents GitHub Wiki
protocol
View
一个表示SwiftUI视图的类型。
声明
protocol View
概述
通过声明遵守View protocol的类型来创建自定义视图。实现所需的body计算属性，以提供自定义视图的内容和行为。
主题
1 - Implementing a Custom View - 实现自定义视图
1.1 视图的内容和行为。必需的，默认实现。
var body: Self.Body
demo
struct ContentView: View {
/// 1 - Implementing a Custom View - 实现自定义视图
/// 视图的内容和行为。
/// 必需的。默认实现。
var body: some View {
Text("Hello, World!")
.background(Color.yellow)
.border(Color.red, width: 2)
}
}
2 - Sizing a Views - 制定视图的大小
2.1 将视图定位在具有指定大小的不可见框架中
func frame(width: CGFloat?, height: CGFloat?, alignment: Alignment) -> View
2.2 将视图定位在具有指定宽度和高度的不可见框架中。
func frame(minWidth: CGFloat?, idealWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, idealHeight: CGFloat?, maxHeight: CGFloat?, alignment: Alignment) -> View
2.3 将视图修复为理想大小。
func fixedSize() -> View
2.4 将视图修复为理想大小，可指定垂直或水平方向的修复。
func fixedSize(horizontal: Bool, vertical: Bool) -> View
2.5 设置父布局应将空间分配给子布局的优先级，默认为0。
func layoutPriority(Double) -> View
demo
struct SizingInViews: View {
/// 2 - Sizing a Views - 制定视图大小
var body: some View {
VStack {
/// 2.1 将视图定位在具有指定大小的不可见框架中。
Text("Hello, World!")
.background(Color.yellow)
.border(Color.red, width: 2)
.frame(width: 200, height: 50, alignment: .topLeading)
/// 2.2 将视图定位在具有指定宽度和高度的不可见框架中。
Text("Hello, World 2Hello, World 2Hello, World 2Hello, World 2Hello, World 2Hello, World 2Hello")
.background(Color.yellow)
.border(Color.red, width: 2)
.frame(minWidth: 10, idealWidth: 60, maxWidth: 300, minHeight: 10, idealHeight: 60, maxHeight: 300, alignment: .topTrailing)
/// 2.3 将视图固定在其理想大小。
Text("Hello, World3")
.background(Color.yellow)
.border(Color.red, width: 2)
.fixedSize()
/// 2.4 将视图修复为理想大小，可指定垂直或水平方向的修复。
Text("Hello, World4Hello, World4HelloHello, World4Hello, World4HelloHello")
.background(Color.yellow)
.border(Color.red, width: 2)
.fixedSize(horizontal: true, vertical: false)
.frame(width: 200, height: 200)
/// 2.5 指定布局优先级 默认为0
Text("Hello, World5")
.background(Color.yellow)
.border(Color.red, width: 2)
.layoutPriority(1)
}
}
}
3 - Positioning a View - 定位视图
3.1 将视图的中心固定在其父坐标空间的指定点上。
func position(CGPoint) -> View
3.2 将视图的中心固定在其父坐标空间中指定的坐标上。
func position(x: CGFloat, y: CGFloat) -> View
3.3 通过给定Size中的width和height偏移视图。
func offset(CGSize) -> View
3.4 通过指定的x和y值偏移视图。
func offset(x: CGFloat, y: CGFloat) -> View
3.5 将视图延展到指定边缘的安全区域之外。
func edgesIgnoringSafeArea(Edge.Set) -> View
3.6 将名称分配给此视图的坐标空间，此视图的后代可以将其引用。
func coordinateSpace<T>(name: T) -> View
demo
struct PositioningAViews: View {
/// 3 - Positioning a View - 定位视图
var body: some View {
ZStack {
/// 3.1 将视图的中心固定在其父坐标空间的指定点上。
Text("Hello, World!")
.background(Color.red)
.position(CGPoint(x: 100, y: 0))
/// 3.2 将视图的中心固定在其父坐标空间中指定的坐标上。
Text("Hello, World2")
.background(Color.green)
.position(x: 100, y: 30)
/// 3.3 通过给定`Size`中的`width`和`height`偏移视图。
Text("Hello, World3")
.background(Color.red)
.position(x: 100, y: 60)
.offset(CGSize(width: 30, height: 0))
/// 3.4 通过指定的`x`和`y`值偏移视图。
Text("Hello, World4")
.background(Color.green)
.position(x: 100, y: 90)
.offset(x: -30, y: 0)
}
.edgesIgnoringSafeArea(.top)/// 3.5 将视图延展到指定边缘的安全区域之外。
.coordinateSpace(name: "test")/// 3.6 将名称分配给此视图的坐标空间，此视图的后代可以将其引用。
}
}
4 - Aligning Views - 设置视图的对其方式
4.1 设置视图的水平对齐方式。
func alignmentGuide(HorizontalAlignment, computeValue: (ViewDimensions) -> CGFloat) -> View
4.2 设置视图的垂直
对齐方式。
func alignmentGuide(VerticalAlignment, computeValue: (ViewDimensions) -> CGFloat) -> View
4.3 视图在其自身的坐标空间中的大小和对齐方式的规则。
struct ViewDimensions
4.4 用于标识对齐规则的类型。
protocol AlignmentID
5 - Adjusting the Padding of a View - 调整视图边距
5.1 将视图沿所有边缘内嵌填充指定的大小。
func padding(CGFloat) -> View
5.2 使用指定的EdgeInsets内嵌填充视图。
func padding(EdgeInsets) -> View
5.3 使用指定的Edge集合内嵌填充指定大小。
func padding(Edge.Set, CGFloat?) -> View
5.4 定义了矩形各边的内嵌距离的结构体。
struct EdgeInsets
demo
struct AdjustingPaddingView: View {
/// 5 - Adjusting the Padding of a View - 调整视图边距
var body: some View {
ZStack {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
.background(Color.yellow)
.border(Color.red, width: 2)
.position(x: 100, y: 30)
.padding()
}
.background(Color.gray)
// .padding()/// 默认边距
// .padding(30) /// 5.1 将视图沿所有边缘内嵌填充指定的大小。
// .padding(EdgeInsets(top: 20, leading: 10, bottom: 60, trailing: 50)) /// 5.2 使用指定的`EdgeInsets`内嵌填充视图。
.padding([.leading,.trailing], 20) /// 5.3 使用指定的`Edge`集合内嵌填充指定大小。
}
}