SwiftUI 分别设置上下左右的 padding 或者 margin

16 min read

在SwiftUI中,可以使用.padding()方法来设置视图的内边距(padding),以及.padding(.top), .padding(.bottom), .padding(.leading).padding(.trailing)方法来设置不同方向上的内边距(padding)。

例如,以下示例将在视图的所有四个边添加相同的内边距:

Text("Hello, World!")
    .padding()

以下示例将在视图的顶部添加10个点的内边距:

Text("Hello, World!")
    .padding(.top, 10)

以下示例将在视图的底部添加20个点的内边距:

Text("Hello, World!")
    .padding(.bottom, 20)

以下示例将在视图的左侧添加5个点的内边距:

Text("Hello, World!")
    .padding(.leading, 5)

以下示例将在视图的右侧添加15个点的内边距:

Text("Hello, World!")
    .padding(.trailing, 15)

除了使用.padding()方法来设置内边距,还可以使用.padding()方法的其他重载方法来设置不同边的不同内边距,例如:

Text("Hello, World!")
    .padding(EdgeInsets(top: 10, leading: 20, bottom: 30, trailing: 40))

以上示例将在视图的顶部添加10个点的内边距,在左侧添加20个点的内边距,在底部添加30个点的内边距,在右侧添加40个点的内边距。

请注意,如果需要设置外边距(margin),则需要在视图外部添加容器视图,然后在容器视图上应用内边距(padding)。

VStack {
    Text("Hello, World!")
}
.padding()

以上示例将在VStack容器视图及其内部的Text视图之间应用内边距。

希望对你有所帮助!