Swift UI Creating List Bubble Effect - ios

Question

I am trying to recreate the following list effect in 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)
}
}
I am trying to piece together how to create this effect where the two rows are stacked on top of each other, I do not want them to be packed how list view currently does it. I tried to add padding but it doesn't seem to work, any help would be much appreciated.

Answer 1

Something like this should get you going:
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()
}
}