I have a complex app and a complex sheet view which has a lot going on inside it hence sharing a sample code. It’s basically divided into 2 portions where upper part has static elements which shouldn’t scroll and other part of the view has scrollable elements (buttons vertically stacked and a dynamic list). When keyboard is up, user should be able to scroll these scrollable elements to look at it.

Issue description and solutions I tried – I noticed that if list is dynamic and is placed within scroll view, then the list does not get displayed.

Approach A – Did a lot of searching and noticed if list has .scaledToFit() modifier, then list gets displayed within scroll view but has it’s own scroller i.e. list gets scrolled separately and buttons above it get’s scrolled separately. My list is inset grouped style so has special look and feel (Approach A in my code below and first screenshot).

Approach B – To tackle this, instead of using List element, I decided to use LazyVStack and display the data. This I think adds elements within VStack as part of scroll view, hence the elements scroll along with buttons which is what I need, however it doesn’t give look and feel of inset grouped.

What I need – For Approach B, is there a way I can give the customized list the same look and feel as inset group? Or for Approach A, can I make the list scroll along with the buttons?

I basically need a scroll view where both the buttons and contents of list scroll together and list has inset grouped style. Currently Approach A is given is the expected list style, but not the scroll behavior and Approach B is giving me correct scroll behavior, but not the expected list style.

Code:

import Foundation
import SwiftUI

struct ContentView: View {
    @State private var showModal = false
    var body: some View {
        VStack {
            Text("Sample app for list within scroll view.")
        }
        .onAppear {
            self.showModal = true
        }
        .sheet(isPresented: self.$showModal) {
            SheetView()
        }
    }
}

struct SheetView: View {
    @State private var randomNumber: Int = 25
    
    var body: some View {
        NavigationStack {
            VStack {
                nonScrollableView
                    .padding(.top, 30.0)
                    .padding(.bottom, 30.0)
                
                ScrollView {
                    Button { } label: { Text("Button A") }
                    Button { } label: { Text("Button B") }
                    
                    // Approach A - List scrolls separately and the buttons scroll separately, probably because List has it's own scroll.
//                    List {
//                        Section {
//                            ForEach(0..<randomNumber, id: .self) { value in
//                                Text("Number is - (value)")
//                            }
//                        } header: {
//                            Text("Showing list data")
//                        }
//                    }
//                    .listStyle(.insetGrouped)
//                    .scrollContentBackground(.hidden)
//                    .environment(.defaultMinListHeaderHeight, 0)
//                    .foregroundColor(.black)
//                    .scrollContentBackground(.hidden)
//                    .scaledToFit() // List does not show up without this.
                    
                    // Approach B - Not using list. This is in same scroll view as buttons and scrolls along with the buttons,
                    // but doesn't give the look of inset grouped list.
                    LazyVStack(alignment: .leading, spacing: 0) {
                        Section {
                            ForEach(0..<randomNumber, id: .self) { value in
                                HStack {
                                    Text("Number is - (value)")
                                }
                                .padding([.top, .bottom], 12.0)
                                .padding([.leading, .trailing], 20.0)
                                .contentShape(Rectangle())
                            }
                        } header: {
                            Text("Showing list data").font(.footnote)
                                .foregroundStyle(Color.gray)
                                .padding(.leading, 28.0)
                                .padding([.top, .bottom], 15.0)
                        }
                    }
                    .scrollContentBackground(.hidden)
                    .environment(.defaultMinListHeaderHeight, 0)
                    .foregroundColor(.black)
                    .scrollContentBackground(.hidden)
                }
            }
            .background(Color.blue.opacity(0.1))
            .onAppear {
                randomNumber = Int.random(in: 15..<35)
            }
        }
    }
    
    /// View showing  start and stop location on respective text fields.
    var nonScrollableView: some View {
        VStack {
            List {
                Section {
                    Text("This sections has elements like text fields which does not need to be scrolled")
                } header: {
                    Text("Non-scrollable content")
                }
            }
            .listStyle(.insetGrouped)
            .scrollContentBackground(.hidden)
        }
        .frame(height: 105.0)
    }
}

Screenshot for Approach A:

Screenshot for Approach B: