如何实现watchOS正念应用式列表缩放效果？根视图选哪种？

根视图选择 #

优先选List作为根容器：

• Form偏向表单类场景（比如设置页），不符合这种滚动交互列表的需求
• TabView是标签页切换组件，和该列表的核心交互不匹配
• List天然支持滚动、动态单元格布局，更适合实现这种选中态变化的列表效果

核心实现思路 #

利用SwiftUI的ScrollViewReader监听当前选中的列表项，结合scaleEffect和动画，让选中项保持原尺寸，未选中项缩小。

代码示例 #

import SwiftUI

struct MindfulnessItem: Identifiable {
    let id = UUID()
    let title: String
    let icon: String
}

struct MindfulnessListView: View {
    @State private var selectedItemId: UUID?
    private let items: [MindfulnessItem] = [
        .init(title: "专注", icon: "moon"),
        .init(title: "呼吸", icon: "heart"),
        .init(title: "冥想", icon: "leaf"),
        .init(title: "放松", icon: "cloud")
    ]
    
    var body: some View {
        ScrollViewReader { proxy in
            List(items) { item in
                HStack {
                    Image(systemName: item.icon)
                    Text(item.title)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .scaleEffect(selectedItemId == item.id ? 1.0 : 0.8)
                .animation(.easeInOut(duration: 0.2), value: selectedItemId)
                .onTapGesture {
                    selectedItemId = item.id
                    withAnimation {
                        proxy.scrollTo(item.id, anchor: .center)
                    }
                }
                .onAppear {
                    // 默认选中第一个元素
                    if selectedItemId == nil {
                        selectedItemId = items.first?.id
                    }
                }
            }
            .listStyle(.plain)
        }
    }
}

关键说明 #

1. ScrollViewReader：用来控制滚动位置，点击选中项时自动滚动到中心位置，保证选中项在视野内
2. scaleEffect：根据selectedItemId判断是否为选中项，设置1.0（原尺寸）或0.8（缩小）的缩放比例
3. 动画绑定：将动画绑定到selectedItemId，切换选中状态时自动触发平滑的缩放过渡
4. 列表样式：使用.plain列表样式，去掉默认的分隔线和背景，更贴近watchOS正念应用的视觉风格

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