I'm struggling to recreate the UI of Apple's Journal app. The List in the Journal app has each element as an independent entity, and the swipe animations for deletion and editing are unlike anything I've seen before.
To replicate this, I attempted the following code, which seems to work initially. However, when I swipe to delete, a red area with mismatched sizing appears due to the plain List style.
import SwiftUI
struct ContentView: View {
@State private var items = Array(0...5)
var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(String(item))
.padding()
.frame(maxWidth: .infinity)
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
}
.swipeActions(edge: .trailing){
Button(role: .destructive) { print("delete action.") } label: { Image(systemName: "trash.fill") }
}
}
.listStyle(.plain)
}
}
Does anyone have ideas or suggestions on how to recreate a List similar to the Journal app using SwiftUI or UIKit? Additionally, does anyone know how Apple might have implemented this?
Any comments, even minor ones, would be greatly appreciated. Thank you!