ios - Swift UI 创建列表气泡效果

Question

我正在尝试在 SwiftUI 中重新创建以下列表效果，

List(){
  TaskRowComponent(coreRouter: CoreRouter())
}
 .listRowBackground(ColorScheme().field())
 .cornerRadius(10)
 .padding()

import SwiftUI

struct TaskRowComponent: View{
    @ObservedObject var coreRouter: CoreRouter;

    var body: some View {
        VStack{
            Text("This is a row!")
        }
        .listRowBackground(Color.green)

        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 80, maxHeight: 80, alignment: .leading)
    }
}

我正在尝试拼凑如何在两行相互堆叠的情况下创建这种效果，我不希望它们被打包成列表视图当前的工作方式。我尝试添加填充，但它似乎不起作用，任何帮助将不胜感激。

标签： iosswiftxcodeswiftuiswift5

Answer 1

这样的事情应该让你去：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                List {
                    ForEach([1, 2], id: \.self) { item in
                        ZStack {
                            Rectangle()
                                .blendMode(.overlay)
                                .frame(height: 100)
                                .background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.purple]), startPoint: .leading, endPoint: .trailing))
                                .cornerRadius(9)

                            HStack {
                                VStack {
                                    Text("Bikram Sinkemana")
                                        .font(.system(size: 15))
                                        .foregroundColor(.white)

                                    Text("Kiran Regmi")
                                        .font(.system(size: 15))
                                        .foregroundColor(.white)
                                }

                                Text("3:1")
                                    .font(.system(size: 30))
                                    .foregroundColor(.white)

                                VStack {
                                    Text("Bikram Sinkemana")
                                        .font(.system(size: 15))
                                        .foregroundColor(.white)

                                    Text("Sagun Karanjit")
                                        .font(.system(size: 15))
                                        .foregroundColor(.white)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}