ios 实现与image对齐的SwiftUI列表项[重复]

2jcobegt  于 2023-06-07  发布在  iOS
关注(0)|答案(1)|浏览(117)

此问题已在此处有答案

Draw verticle Line with circle along side listview in SwiftUI(2个答案)
昨天关门了。
SwiftUI中实现一个列表有没有一些技巧性的方法,在它的左边有一组“连续”的图像,与文本完全对齐?
我不是在寻找代码,而是在寻找实现这一点的方法。

fkaflof6

fkaflof61#

看看链接的帖子,他们使用的是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)
    }
}

相关问题