如何用SwiftUI/UIKit复刻Apple Journal应用的列表UI与滑动动画？

问题根源 #

你当前的SwiftUI代码里，给列表项直接加了padding、圆角和阴影，但plain List的滑动操作区域默认和列表项的布局边界不对齐，额外的padding让列表项尺寸超出了系统预设的滑动交互容器，导致滑动时出现红色尺寸警告。

SwiftUI修正方案 #

调整布局结构，让列表项的背景和滑动容器完全对齐，避免尺寸溢出：

import SwiftUI

struct ContentView: View {
    @State private var items = Array(0...5)
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                ZStack {
                    // 把背景和阴影放到底层，确保尺寸贴合列表项容器
                    Color.white
                        .cornerRadius(10)
                        .shadow(radius: 5)
                    Text(String(item))
                        .padding()
                }
                .listRowBackground(Color.clear)
                .listRowSeparator(.hidden)
                // 用listRowInsets控制内外间距，替代直接给内容加padding
                .listRowInsets(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
            }
            .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                Button(role: .destructive) {
                    // 补上实际删除逻辑
                    guard let index = items.firstIndex(of: item) else { return }
                    items.remove(at: index)
                } label: {
                    Image(systemName: "trash.fill")
                }
            }
        }
        .listStyle(.plain)
        // 模拟Journal的浅灰背景
        .background(Color(UIColor.systemGray6))
    }
}

关键调整点 #

• 用ZStack把背景和文本分层，确保背景尺寸完全匹配列表项的布局容器
• 用listRowInsets控制列表项的内外间距，替代直接给文本加padding，避免滑动区域尺寸不匹配
• 设置allowsFullSwipe: false，更贴近Journal的滑动逻辑（不会全屏滑出删除按钮）

UIKit替代思路 #

如果SwiftUI的系统API限制太多，想完全复刻Journal的精细动画，建议用UITableView自定义实现：

• 自定义UITableViewCell，把内容视图做成带圆角、阴影的独立组件，严格控制cell的布局边距
• 在trailingSwipeActionsConfigurationForRowAt代理方法里配置滑动操作，自定义按钮样式和动画
• 调整cell的contentView和滑动操作区域的布局约束，确保完全对齐，避免尺寸冲突

关于Apple Journal的实现推测 #

Journal的列表大概率是基于UIKit的UITableView定制的，而非SwiftUI：

• UIKit能更精细地控制滑动动画（比如滑动时列表项的阴影变化、按钮的渐入效果）
• 通过自定义UISwipeActionsConfiguration，可以精准控制滑动触发的逻辑和视觉反馈
• 自定义cell布局能彻底避免滑动区域和内容的尺寸不匹配问题，这也是系统级App常用的实现方式

内容的提问来源于stack exchange，提问作者Kngw Kngw