英文:
Using 2 scroll views in a view while saving scroll position of each
问题
我想修改我的Swift UI视图，以便我可以拥有多个滚动视图。根据选择的按钮，屏幕上一次只显示一个视图。我已经这样做了，但我遇到的问题是保存每个滚动视图的滚动位置，以便如果用户滑动到其他滚动视图然后返回，它仍然保持在相同的位置。现在的情况是每次在它们之间切换时，滚动视图的位置都被重置到顶部。
import SwiftUI
struct test: View {
@StateObject var viewModel = fetcher()
@State private var buttonOne: Bool = true
@State private var buttonTwo: Bool = false
var body: some View {
VStack(){
HStack() {
Spacer()
Button {
buttonOne = true
buttonTwo = false
} label: {
ZStack{
Color(.blue)
Text("滚动视图2")
}.frame(width: 100, height: 100)
}
Button {
buttonOne = false
buttonTwo = true
} label: {
ZStack{
Color(.blue)
Text("滚动视图1")
}.frame(width: 100, height: 100)
}
Spacer()
}.padding(.bottom)
if buttonOne{
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}
} else if buttonTwo {
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}
}
}
}
}
英文:
I would like to modify my swift UI view so that I can have multiple scroll views. And only one view is displayed on the screen at a time based on which button is selected. I have already done so, but the problem I'm running into is saving the scroll position of each scroll view so that if the user slides to the other scroll view and comes back, then it's still at the same position. What's going on now is that the position of the scroll view is just reset to the top every time I switch between them.
import SwiftUI
struct test: View {
@StateObject var viewModel = fetcher()
@State private var buttonOne: Bool = true
@State private var buttonTwo: Bool = false
var body: some View {
VStack(){
HStack() {
Spacer()
Button {
buttonOne = true
buttonTwo = false
} label: {
ZStack{
Color(.blue)
Text("scroll view 2")
}.frame(width: 100, height: 100)
}
Button {
buttonOne = false
buttonTwo = true
} label: {
ZStack{
Color(.blue)
Text("scroll view 1")
}.frame(width: 100, height: 100)
}
Spacer()
}.padding(.bottom)
if buttonOne{
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}
} else if buttonTwo {
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}
}
}
}
}
答案1
得分: 0
相对于在if条件内使用您的视图，您需要在此情况下使用TabView()。请查看下面的代码，并为TabView中的每个视图分配唯一的标签。这将解决您的滚动视图问题。
struct ContentView: View {
@StateObject var viewModel = fetcher()
@State private var buttonOne: Bool = true
@State private var buttonTwo: Bool = false
@State private var selection = 0
var body: some View {
VStack(){
HStack() {
Spacer()
Button {
buttonOne = true
buttonTwo = false
} label: {
ZStack{
Color(.blue)
Text("滚动视图 2")
}.frame(width: 100, height: 100)
}
Button {
buttonOne = false
buttonTwo = true
} label: {
ZStack{
Color(.blue)
Text("滚动视图 1")
}.frame(width: 100, height: 100)
}
Spacer()
}.padding(.bottom)
TabView(selection: $selection) {
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}.tag(0)
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}.tag(1)
} //: TabView
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}
}
英文:
Instead of using your views inside if condition you need to use TabView() for this scenario. Have a look at below code and assign unique tag to each view inside the TabView. This will resolve you scroll view as well.
struct ContentView: View {
@StateObject var viewModel = fetcher()
@State private var buttonOne: Bool = true
@State private var buttonTwo: Bool = false
@State private var selection = 0
var body: some View {
VStack(){
HStack() {
Spacer()
Button {
buttonOne = true
buttonTwo = false
} label: {
ZStack{
Color(.blue)
Text("scroll view 2")
}.frame(width: 100, height: 100)
}
Button {
buttonOne = false
buttonTwo = true
} label: {
ZStack{
Color(.blue)
Text("scroll view 1")
}.frame(width: 100, height: 100)
}
Spacer()
}.padding(.bottom)
TabView(selection: $selection) {
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}.tag(0)
ScrollView {
LazyVStack {
ForEach(viewModel.content.indices, id: \.self) { i in
someView(content: i)
}
}
}.tag(1)
} //: TabView
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论