首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >SwiftUI表自定义滑动?

SwiftUI表自定义滑动?
EN

Stack Overflow用户
提问于 2019-06-27 02:46:04
回答 2查看 3.3K关注 0票数 7

有没有向左和向右滑动表格行的方法?我还没有找到新的框架SwiftUI的东西,所以可能没有机会使用SwiftUI来做这件事?我需要删除行并使用自定义卷帘

EN

回答 2

Stack Overflow用户

发布于 2019-07-28 07:44:18

可以非常简单地实现删除操作和重新排序列表项的能力。

代码语言:javascript
复制
struct SwipeActionView: View {
    @State var items: [String] = ["One", "two", "three", "four"]

    var body: some View {
        NavigationView {
            List {
                ForEach(items.identified(by: \.self)) { item in
                    Text(item)
                }
                .onMove(perform: move)
                .onDelete(perform: delete)      
            }
            .navigationBarItems(trailing: EditButton())
        }
    }

    func delete(at offsets: IndexSet) {
        if let first = offsets.first {
            items.remove(at: first)
        }
    }

    func move(from source: IndexSet, to destination: Int) {
        // sort the indexes low to high
        let reversedSource = source.sorted()

        // then loop from the back to avoid reordering problems
        for index in reversedSource.reversed() {
            // for each item, remove it and insert it at the destination
            items.insert(items.remove(at: index), at: destination)
        }
    }
}

编辑:有一篇来自苹果的文章,我不敢相信我之前没有找到。

编写SwiftUI手势

..。我还没有尝试过,但这篇文章似乎做得很好!

票数 4
EN

Stack Overflow用户

发布于 2021-02-19 20:39:25

我想要同样的东西,现在有了下面的实现。

SwipeController检查何时执行刷卡操作并执行SwipeAction,现在您可以在executeAction函数的打印行下添加刷卡操作。但最好从这里创建一个抽象类。

然后在SwipeLeftRightContainer结构中,我们将大部分逻辑放在DragGesture中。它所做的是,当你拖动它时,它会改变偏移量,然后调用SwipeController,看看是否达到了向左或向右滑动的阈值。然后,当您完成拖动时,它将进入DragGesture的onEnded回调。在这里,我们将重置偏移量,并让SwipeController决定执行一个操作。

请记住,视图中的许多变量对于iPhone X都是静态的,因此您应该将它们更改为最适合的。

代码语言:javascript
复制
import SwiftUI

/** executeRight: checks if it should execute the swipeRight action
    execute Left: checks if it should execute the swipeLeft action
    submitThreshold: the threshold of the x offset when it should start executing the action
*/
class SwipeController {
    var executeRight = false
    var executeLeft = false
    let submitThreshold: CGFloat = 200
    
    func checkExecutionRight(offsetX: CGFloat) {
        if offsetX > submitThreshold && self.executeRight == false {
            Utils.HapticSuccess()
            self.executeRight = true
        } else if offsetX < submitThreshold {
            self.executeRight = false
        }
    }
    
    func checkExecutionLeft(offsetX: CGFloat) {
        if offsetX < -submitThreshold && self.executeLeft == false {
            Utils.HapticSuccess()
            self.executeLeft = true
        } else if offsetX > -submitThreshold {
            self.executeLeft = false
        }
    }
    
    func excuteAction() {
        if executeRight {
            print("executed right")
        } else if executeLeft {
            print("executed left")
        }
        
        self.executeLeft = false
        self.executeRight = false
    }
}

struct SwipeLeftRightContainer: View {
    
    var swipeController: SwipeController = SwipeController()
    
    @State var offsetX: CGFloat = 0
    
    let maxWidth: CGFloat = 335
    let maxHeight: CGFloat = 125
    let swipeObjectsOffset: CGFloat = 350
    let swipeObjectsWidth: CGFloat = 400
    
    @State var rowAnimationOpacity: Double = 0
    var body: some View {
        ZStack {
            Group {
                HStack {
                    Text("Sample row")
                    Spacer()
                }
            }.padding(10)
            .zIndex(1.0)
            .frame(width: maxWidth, height: maxHeight)
            .cornerRadius(5)
            .background(RoundedRectangle(cornerRadius: 10).fill(Color.gray))
            .padding(10)
            .offset(x: offsetX)
            .gesture(DragGesture(minimumDistance: 5).onChanged { gesture in
                withAnimation(Animation.linear(duration: 0.1)) {
                    offsetX = gesture.translation.width
                }
                swipeController.checkExecutionLeft(offsetX: offsetX)
                swipeController.checkExecutionRight(offsetX: offsetX)
            }.onEnded { _ in
                withAnimation(Animation.linear(duration: 0.1)) {
                    offsetX = 0
                    swipeController.prevLocX = 0
                    swipeController.prevLocXDiff = 0
                    self.swipeController.excuteAction()
                }
            })
            Group {
                ZStack {
                    Rectangle().fill(Color.red).frame(width: swipeObjectsWidth, height: maxHeight).opacity(opacityDelete)
                    Image(systemName: "multiply").font(Font.system(size: 34)).foregroundColor(Color.white).padding(.trailing, 150)
                }
            }.zIndex(0.9).offset(x: swipeObjectsOffset + offsetX)
            Group {
                ZStack {
                    Rectangle().fill(Color.green).frame(width: swipeObjectsWidth, height: maxHeight).opacity(opacityLike)
                    Image(systemName: "heart").font(Font.system(size: 34)).foregroundColor(Color.white).padding(.leading, 150)
                }
            }.zIndex(0.9).offset(x: -swipeObjectsOffset + offsetX)
        }
    }
    
    var opacityDelete: Double {
        if offsetX < 0 {
            return Double(abs(offsetX) / 50)
        }
        return 0
    }
    
    var opacityLike: Double {
        if offsetX > 0 {
            return Double(offsetX / 50)
        }
        return 0
    }
}

struct SwipeListView: View {
    
    var body: some View {
        ScrollView {
            ForEach(0..<10) { index in
                SwipeLeftRightContainer().listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
            }
        }
    }
    
}

struct SwipeLeftRight_Previews: PreviewProvider {
    static var previews: some View {
        SwipeListView()
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56779283

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档