在 SwiftUI 的列表行中添加形状
Adding shapes in List row of SwiftUI
我正在尝试创建一个列表视图,其中的行如下所示:
但是,我无法将 Circle
对齐到前端。尝试在 VStack
中使用 Spacer()
、HStack
,但它不起作用。这是我的代码及其输出。
struct PeopleView: View {
let people = ["Adam", "James"]
var body: some View {
NavigationView {
List {
ForEach(people, id: \.self) { person in
HStack {
Circle()
VStack {
Text("\(person)")
}
}
}
}
.navigationBarTitle("People", displayMode: .inline)
}
}
}
SwiftUI 中的一些视图填满了所有可用的 space。这些视图是形状、颜色、spacers、分隔线和 GeometryReader
.
您的 Circle
是一个形状,它的行为类似于 Spacer
(就填充 space 而言)。
如果您将 Circle
替换为圆的 图片 它将起作用:
ForEach(people, id: \.self) { person in
HStack {
Image(systemName: "circle.fill")
.imageScale(.large)
Spacer()
VStack {
Text("\(person)")
}
}
}
实际上在这种情况下你不需要形状本身,而只是作为一个遮罩来在视觉上以圆形呈现文本。
所以解决方案可以像下面这样
HStack {
Text(person.prefix(2).uppercased()).bold()
.foregroundColor(.white)
.padding()
.background(Color.red)
.mask(Circle()) // << shaping text !!
Spacer()
VStack {
Text("\(person)")
}
}
发生这种情况是因为您没有为 Circle
形状提供固定(或相对)框架,因此 Circle
占用了最大可用宽度。
如果您添加 frame(width:height:)
,一切都应该正常工作:
struct PeopleView: View {
let people = ["Adam", "James"]
var body: some View {
NavigationView {
List {
ForEach(people, id: \.self) { person in
HStack {
Circle()
.frame(width: 50, height: 50)
VStack {
Text("\(person)")
}
}
}
}
.navigationBarTitle("People", displayMode: .inline)
}
}
}
我正在尝试创建一个列表视图,其中的行如下所示:
但是,我无法将 Circle
对齐到前端。尝试在 VStack
中使用 Spacer()
、HStack
,但它不起作用。这是我的代码及其输出。
struct PeopleView: View {
let people = ["Adam", "James"]
var body: some View {
NavigationView {
List {
ForEach(people, id: \.self) { person in
HStack {
Circle()
VStack {
Text("\(person)")
}
}
}
}
.navigationBarTitle("People", displayMode: .inline)
}
}
}
SwiftUI 中的一些视图填满了所有可用的 space。这些视图是形状、颜色、spacers、分隔线和 GeometryReader
.
您的 Circle
是一个形状,它的行为类似于 Spacer
(就填充 space 而言)。
如果您将 Circle
替换为圆的 图片 它将起作用:
ForEach(people, id: \.self) { person in
HStack {
Image(systemName: "circle.fill")
.imageScale(.large)
Spacer()
VStack {
Text("\(person)")
}
}
}
实际上在这种情况下你不需要形状本身,而只是作为一个遮罩来在视觉上以圆形呈现文本。
所以解决方案可以像下面这样
HStack {
Text(person.prefix(2).uppercased()).bold()
.foregroundColor(.white)
.padding()
.background(Color.red)
.mask(Circle()) // << shaping text !!
Spacer()
VStack {
Text("\(person)")
}
}
发生这种情况是因为您没有为 Circle
形状提供固定(或相对)框架,因此 Circle
占用了最大可用宽度。
如果您添加 frame(width:height:)
,一切都应该正常工作:
struct PeopleView: View {
let people = ["Adam", "James"]
var body: some View {
NavigationView {
List {
ForEach(people, id: \.self) { person in
HStack {
Circle()
.frame(width: 50, height: 50)
VStack {
Text("\(person)")
}
}
}
}
.navigationBarTitle("People", displayMode: .inline)
}
}
}