Swift UI Scroll View: Set frame for drag indicator

Question

I have following problem. I want to create a vertical ScrollView with many rows. At the bottom of the view I have an info bar which appears over the scroll view because I put all the items in a ZStack. Here is my code and what it produces:

struct ProblemView: View {
    

    var body: some View {
        ZStack {
            ScrollView(.vertical, showsIndicators: true) {
                
                VStack {
                    ForEach(0..<100, id:\.self) {i in
                        HStack {
                            Text("Text \(i)")
                                .foregroundColor(.red)
                            Spacer()
                            Image(systemName: "plus")
                                .foregroundColor(.blue)
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        Divider()
                        
                    }
                }
            }
            
            VStack {
                Spacer()
                HStack {
                    Text("Some Info here")
                    Image(systemName: "info.circle")
                        .foregroundColor(.blue)
                }
                .padding()
                .frame(maxWidth: .infinity)
                .ignoresSafeArea()
                .background(.ultraThinMaterial)
                
            }
            
        }
    }

    
}

struct ProblemView_Previews: PreviewProvider {
    static var previews: some View {
        ProblemView()
    }
}

As you can see the drag indicator is hidden behind the info frame. Also the last item can't be seen because it is also behind the other frame. What

I want is that the drag indicator stops at this info frame. Why am I using a ZStack and not just a VStack? I want that this opacity effect behind the info frame, you get when you scroll.

Abv · Accepted Answer · 2022-02-13 21:01:44Z

1

A edit on my preview post has been added and therefore I cannot edit it... I am just gonna post the answer as an other one then.

This is the code that fixes your problem:

import SwiftUI

struct ProblemView: View {
  var body: some View {
    ScrollView {
        
        
        VStack {
            ForEach(0..<100, id:\.self) {i in
                HStack {
                    Text("Text \(i)")
                      .foregroundColor(.red)
                    Spacer()
                    Image(systemName: "plus")
                      .foregroundColor(.blue)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()
                Divider()
            }
      }
      .frame(maxWidth: .infinity)
    }
    .safeAreaInset(edge: .bottom) { // 👈🏻
        VStack {
            
            HStack {
                Text("Some Info here")
                Image(systemName: "info.circle")
                    .foregroundColor(.blue)
            }
            .padding()
            .frame(maxWidth: .infinity)
            .ignoresSafeArea()
            .background(.ultraThinMaterial)
            
        }
  }
}
}

struct ProblemView_Previews: PreviewProvider {
    static var previews: some View {
        ProblemView()
    }
}

answered Feb 13, 2022 at 21:01

Abv

4244 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TannenzapfenStock Over a year ago

Ah. I have never heard of this modifier. Yeah but this is exactly what I want. Huge thanks.

Asperi · Accepted Answer · 2022-02-13 16:05:12Z

We cannot control offset of indicator, but we can make all needed views visible by injecting last empty view with the same height (calculated dynamically) as info panel.

Here is possible approach. Tested with Xcode 13.2 / iOS 15.2

struct ProblemView: View {
    @State private var viewHeight = CGFloat.zero


    var body: some View {
        ZStack {
            ScrollView(.vertical, showsIndicators: true) {

                VStack {
                    ForEach(0..<100, id:\.self) {i in
                        HStack {
                            Text("Text \(i)")
                                .foregroundColor(.red)
                            Spacer()
                            Image(systemName: "plus")
                                .foregroundColor(.blue)
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        Divider()

                    }
                    Color.clear
                        .frame(minHeight: viewHeight)     // << here !!
                }
            }

            VStack {
                Spacer()
                HStack {
                    Text("Some Info here")
                    Image(systemName: "info.circle")
                        .foregroundColor(.blue)
                }
                .padding()
                .frame(maxWidth: .infinity)
                .ignoresSafeArea()
                .background(.ultraThinMaterial)
                .background(GeometryReader {
                    Color.clear.preference(key: ViewHeightKey.self,
                                           value: $0.frame(in: .local).size.height)
                })

            }

        }
        .onPreferenceChange(ViewHeightKey.self) {
            self.viewHeight = $0
        }
    }
}

struct ViewHeightKey: PreferenceKey {
    static var defaultValue: CGFloat { 0 }
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = value + nextValue()
    }
}

Collectives™ on Stack Overflow

Swift UI Scroll View: Set frame for drag indicator

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related