SwiftUI ScrollView 垂直和水平滚动

Posted 2023-02-15

【中文标题】SwiftUI ScrollView 垂直和水平滚动

【英文标题】：SwiftUI ScrollView vertical and horizontal scroll

【发布时间】：2020-09-23 20:22:53

【问题描述】：

我有一个滚动视图，我想根据 @State 更改滚动的方向。

struct HomeScreen: View 
    @State var isVertical: Boolean = true

    var body: some View 
    VStack
        Button(action: 
                self.isVertical.toggle()
            ) 
                Text("press me")
        .padding()
        ScrollView(self.isVertical == true ? .horizontal : .vertical, showsIndicators: true)
                    if(self.isVertical)
                        HStack 
                            Text("a")
                            Text("b")
                            Text("c")
                            Text("d")

                            Spacer()
                        
                     else 
                        VStack
                            Text("a")
                            Text("b")
                            Text("c")
                            Text("d")
                        
                    
                .padding()
    

当第一次在这个屏幕上滚动视图是垂直的时，只要我点击按钮并反转状态，滚动视图就会改变并变得疯狂，垂直和水平滚动。我究竟做错了什么？我希望基于您正在垂直或水平滚动的那个。非常感谢

【参考方案1】：

这里是固定的变体（也更正了isVertical 的处理以符合含义）

使用 Xcode 11.4 / ios 13.4 测试

struct HomeScreen: View 
    @State var isVertical: Bool = true

    var body: some View 
        VStack
            Button(action: 
                    self.isVertical.toggle()
                ) 
                    Text("press me")
            .padding()
            ScrollView(self.isVertical ? .vertical : .horizontal, showsIndicators: true)
                        if(self.isVertical)
                            VStack 
                                Text("a")
                                Text("b")
                                Text("c")
                                Text("d")

                                Spacer()
                            
                         else 
                            HStack
                                Text("a")
                                Text("b")
                                Text("c")
                                Text("d")
                            
                        
                    .id(isVertical)       // << main part !!
                     .padding()