Question 68754 in IOS Swift Question posted in
The official documentation can be found here.

How to drag view for expand and collaps in SwiftUI? – Ios swift

i am trying to expand and collaps Vstack on the click of button as well as by using Drag.

I am able to to it using button click by below code but not sure hoe to use drag gesture.

import SwiftUI

struct ContentView: View {

    @State private var Expand = false

    var body: some View {

        VStack {
            Color
                .red
        }
        .overlay(
            GeometryReader { geometry in
                VStack() {
                    VStack {
                        Text("1")
                        if Expand {
                            Text("2")
                            Text("3")
                            Text("4")
                            Text("5")
                        }
                    }
                    Button(Expand ? "Collaps" : "Expand") {
                        Expand.toggle()
                    }
                }
                .background(.yellow)
                .frame(maxWidth: .infinity)
            }

        )
    }
}

enter image description here

enter image description here

Tags:

2

Answers


  1. 0

    Here is something I did once. Today you might want to do it with PreferenceKey.

    struct ContentView: View {
    
    let minHeight: CGFloat = 50
    let startHeight: CGFloat = 50
    
    @State private var currentHeight: CGFloat = 1000
    @State private var contentHeight: CGFloat = 0
    
    
    var textContent: some View {
            VStack(alignment: .leading) {
                Text("Text 1: orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient.")
                Text("Text 2: montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. ")
                Text("Text 3: orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur. ")
                Text("Text 4: orem ipsum dolor sit amet, consectetuer adipiscing elit. Aene.")
                Text("Text 5: orem ipsum dosque eu, pretium quis, sem. Nulla consequat massa quis enim. ")
                Text("Text 6: orem ipsum dolor sit amet, consectetuer adipiscing elit. Aene.")
            }
            .padding()
    }

    
    var body: some View {
         VStack {
             VStack(alignment: .leading, spacing: 0) {
                 VStack(spacing: 0) {
                     Color.clear
                         .ignoresSafeArea()
                         .overlay(
                             textContent
                                 .fixedSize(horizontal: false, vertical: true)
                                 .overlay( GeometryReader { geo in Color.clear.onAppear {
                                     contentHeight = geo.size.height
                                     currentHeight = startHeight
                                 }})
                             
                             , alignment: .topLeading )
                         .clipped()
                     
                     Spacer(minLength: 0)
                 }
                 .frame(height: currentHeight)
                 
                 Button {
                     currentHeight = max(contentHeight, minHeight)
                 } label: {
                     Image(systemName: "rectangle.arrowtriangle.2.outward")
                         .padding(.horizontal)
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
                 .overlay(
                     Image(systemName: "line.3.horizontal").foregroundColor(.secondary)
                         .contentShape(Rectangle())
                     
                         .gesture(DragGesture()
                                     .onChanged { value in
                                         currentHeight += value.translation.height
                                         currentHeight = max(currentHeight, minHeight)
                                     }
                                     .onEnded { value in
                                         currentHeight = max(currentHeight, minHeight)
                                     }
                                 )
                 )
                 .padding(5)
             }
             .background(.gray)
             .padding(.horizontal)
             
             Spacer()
         }
     }
}

    enter image description here

    Login or Signup to reply.
  2. 0

    check it!
    https://stackoverflow.com/a/59540581/17281765
    Let me know if it’s not right

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search