实现与图像对齐的SwiftUI列表项

huangapple go评论72阅读模式
英文:

Implementing SwiftUI list items aligned with image

问题

SwiftUI中实现一个列表,其中一组“连续”的图像与文本完美对齐,是否有一些巧妙的方法?

我不是在寻找代码,而是在寻找实现这一目标的方法。

实现与图像对齐的SwiftUI列表项

实现与图像对齐的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.

实现与图像对齐的SwiftUI列表项

实现与图像对齐的SwiftUI列表项

答案1

得分: 1

他们在链接的帖子中使用了 VStackScrollView,但是可以使用 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:

实现与图像对齐的SwiftUI列表项

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)
    }
}

huangapple
  • 本文由 发表于 2023年6月5日 03:19:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76402068.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定