英文:
Implementing SwiftUI list items aligned with image
问题
在SwiftUI中实现一个列表,其中一组“连续”的图像与文本完美对齐,是否有一些巧妙的方法?
我不是在寻找代码,而是在寻找实现这一目标的方法。
英文:
Is there some tricky way to implement a list in SwiftUI with a set of 'continuous' images on its left perfectly aligned with the text?
I am not looking for code, but hints on ways to achieve this.
答案1
得分: 1
他们在链接的帖子中使用了 VStack
和 ScrollView
,但是可以使用 List
来完成:
struct TestView: View {
var body: some View {
List {
ForEach(["pencil", "ruler", "book"], id: \.self) { item in
HStack(alignment: .top) {
VStack(spacing: 0) {
Image(systemName: item)
.foregroundColor(.white)
.frame(width: 35, height: 35)
.background(Color.blue)
.clipShape(RoundedRectangle(cornerRadius: 12))
Rectangle()
.fill(Color.blue.opacity(0.5))
.frame(width: 5, height: 50) //you can remove the height to make it dynamic & use padding for the spacing.
}
VStack(alignment: .leading) {
Text("Day 1")
.font(.title3)
.fontWeight(.bold)
Text("This is a long text as for testing the layout of the cell.")
.fontWeight(.medium)
.opacity(0.7)
}
}
}.listRowInsets(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 15))
.listRowSeparator(.hidden)
}.listStyle(.plain)
}
}
英文:
Looking at the linked post, they are using a VStack
& a ScrollView
. However, this can be done using a List
:
struct TestView: View {
var body: some View {
List {
ForEach(["pencil", "ruler", "book"], id: \.self) { item in
HStack(alignment: .top) {
VStack(spacing: 0) {
Image(systemName: item)
.foregroundColor(.white)
.frame(width: 35, height: 35)
.background(Color.blue)
.clipShape(RoundedRectangle(cornerRadius: 12))
Rectangle()
.fill(Color.blue.opacity(0.5))
.frame(width: 5, height: 50) //you can remove the height to make it dynamic & use padding for the spacing.
}
VStack(alignment: .leading) {
Text("Day 1")
.font(.title3)
.fontWeight(.bold)
Text("This is a long text as for testing the layout of the cell.")
.fontWeight(.medium)
.opacity(0.7)
}
}
}.listRowInsets(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 15))
.listRowSeparator(.hidden)
}.listStyle(.plain)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论