SwiftUI ScrollView 滚动到某个位置 自动滚动_swiftui scrollview滚动定位

1. 先看效果

当点击 50 时，会自动滚动到合适位置。

2. 上代码

import SwiftUI

struct TestScrollViewReaderDemo: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
        ZStack {
            ScrollViewReader { proxy in
                ScrollView {
                    VStack(spacing: 0) {
                        LazyVGrid(columns: columns, spacing: 20) {
                            ForEach(0 ..< 101) { index in
                                VStack(spacing: 0) {
                                    Text("\(index)")
                                }
                                .font(.title)
                                .frame(width: 80, height: 80)
                                .foregroundColor(Color.white)
                                .background(Color.green)
                                .cornerRadius(100)
                                .id(index)
                                .onTapGesture {
                                    print(index)
                                    
                                    withAnimation {
                                        proxy.scrollTo(index, anchor: .top)
                                    }
                                }
                            }
                        }
                        .padding()
                    }
                }
            }
        }
    }
}

#Preview {
    TestScrollViewReaderDemo()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

---

3. 在项目里的实际应用（熊猫小账本 App）

---

喜欢或对你有帮助，点个赞吧，自己先点个嘿嘿。

有错误或者疑问还请评论指出。

我的个人网站 点击访问 hongweizhu.com。

---

END

---

推荐一下我写的的 App 熊猫小账本，里面有用到这篇博客讲的内容（记账时，选择分类后会自动滚动到合适位置）

熊猫小账本 一个简洁的记账 App，用于记录日常消费开支收入，使用 iCloud 保存同步数据。

• 支持备注，自定义时间偶尔忘记记账也没关系。
• 搜索历史记账，支持分类、金额、备注。
• 启动时需要面容/指纹验证，保护个人隐私。
• 支持自定义分类功能，自由添加修改分类。
• 统计图表，支出收入一目了然。
• 每天提醒记账，不会有其他推送。
• 桌面锁屏小组件开发中。。。

点击去看看 声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】