windows 10 pro office 2019 pro office 365 pro windows 10 home windows 10 enterprise office 2019 home and business office 2016 pro windows 10 education visio 2019 microsoft project 2019 microsoft project 2016 visio professional 2016 windows server 2012 windows server 2016 windows server 2019 Betriebssysteme office software windows server https://softhier.com/ instagram takipçi instagram beğeni instagram görüntüleme instagram otomatik beğeni facebook beğeni facebook sayfa beğenisi facebook takipçi twitter takipçi twitter beğeni twitter retweet youtube izlenme youtube abone instagram

Deleting Views and Shifting Content After Using Gesture

Asked By: Anonymous

I have a VStack that, through DragGesture(), .rotationEffect(), and .offset(), can move and rotate off-screen. Below the VStack is another VStack. How should I, upon the VStack moving off-screen, delete the upper VStack and shift the lower VStack upwards to the upper VStack’s original position?

Here is a minimal, reproducible example:

import SwiftUI

struct Test: View {
    @State var offset = CGSize.zero
    var colWidth: CGFloat
    var body: some View {
        VStack {
            VStack {
                Text("A")
            }
            .frame(width: colWidth)
            .border(Color.black, width: 1)
            .rotationEffect(.degrees(Double(offset.width / 5)))
            .offset(x: offset.width * 5, y: 0)
            .gesture(DragGesture()
                        .onChanged { gesture in
                            self.offset = gesture.translation
                        }
                        .onEnded { _ in
                            if abs(self.offset.width) > 100 {
                            } else {
                                self.offset = .zero
                            }
                        }
            )
            VStack {
                Text("B")
            }.frame(width: colWidth)
            .border(Color.black)
        }
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test(colWidth: 414)
    }
}

In this case, when A is shifted out of view, how should I delete A and move B up to the position of A?

Thanks in advance!


Solution

Answered By: Anonymous

First, I would use a ForEach, so if you ever wanted to add more letters (like "C" for example), you wouldn’t need to change your code.

It also makes removing very easy. All you need to do is rows.remove(at: index), and the lower VStacks will shift up.

struct ContentView: View {
    @State var offset = CGSize.zero
    var colWidth: CGFloat = 414
    
    @State var rows = ["A", "B", "C"]
    
    var body: some View {
        
        VStack {
            ForEach(rows.indices, id: .self) { index in
                VStack {
                    Text(rows[index]) /// get the current letter
                }
                .frame(width: colWidth)
                .border(Color.black, width: 1)
                .rotationEffect(.degrees(index != 0 ? 0 : Double(offset.width / 5))) /// only rotate if row is on top (index 0)
                .offset(x: index != 0 ? 0 : offset.width * 5, y: 0) /// only offset if row is on top (index 0)
                .gesture(DragGesture()
                            
                            .onChanged { gesture in
                                self.offset = gesture.translation
                            }
                            .onEnded { _ in
                                if abs(self.offset.width) > 100 {
                                    rows.remove(at: index)
                                }
                                self.offset = .zero
                            }
                )
                
            }
        }
    }
}

Result:
Swipe on row to remove


Edit: Allow swipe on any row to delete

struct ContentView: View {
    @State var gestureIndex: Int?
    @State var offset = CGSize.zero
    var colWidth: CGFloat = 414

    @State var rows = ["A", "B", "C"]

    var body: some View {

        VStack {
            ForEach(rows.indices, id: .self) { index in
                VStack {
                    Text(rows[index])
                }
                .frame(width: colWidth)
                .border(Color.black, width: 1)
                .rotationEffect(.degrees(gestureIndex == index ? Double(offset.width / 5) : 0)) /// only apply rotation if row is dragged row
                .offset(x: gestureIndex == index ? offset.width * 5 : 0, y: 0) /// only apply offset if row is dragged row
                .gesture(DragGesture()
                            .onChanged { gesture in
                                print("change: (index)")
                                self.gestureIndex = index
                                self.offset = gesture.translation
                            }
                            .onEnded { _ in
                                if abs(self.offset.width) > 100 {
                                    rows.remove(at: index)
                                }
                                self.gestureIndex = nil
                                self.offset = .zero
                            }
                )

            }
        }
    }
}

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno
524 Origin Time-out

524 Origin Time-out


cloudflare-nginx