HomeiOS Developmentswift - Listing view backside edges not being clipped ios 26

swift – Listing view backside edges not being clipped ios 26


As mentioned within the feedback, the modifier .onScrollGeometryChange can be utilized to measure the peak of the listing exactly (requires iOS 18). You possibly can then set this peak on the listing, earlier than making use of the clip form. This method additionally adapts to modifications within the textual content measurement.

Right here is the totally up to date instance to indicate it working:

struct SwiftUIView: View {
    let names = [
        Name(name: "Name 1"),
        Name(name: "Name 2 Name Double line list row text which should fit in it too")
    ]
    @State personal var listHeight: CGFloat?

    var physique: some View {
        ZStack {
            Coloration.pink
                .ignoresSafeArea()

            Listing {
                Part {
                    ForEach(names) { title in
                        Button {
                            // do motion
                        } label: {
                            Textual content(title.title)
                        }
                    }
                }
            }
            .listStyle(.plain)
            .onScrollGeometryChange(for: CGFloat.self, of: .contentSize.peak) { _, peak in
                if peak > 0 {
                    listHeight = peak
                }
            }
            .body(peak: listHeight)
            .clipShape(.rect(cornerRadius: 15))
            .scrollContentBackground(.hidden)
            .padding(10)
        }
    }
}

struct Identify: Identifiable {
    let id = UUID()
    let title: String
}

Screenshot


Re. your level 2:

When the textual content is multiple line, in contrast to earlier than it doesn’t lower padding to suit it within the specified peak however as a substitute cuts it off.

If you need the textual content to have much less vertical padding when it wraps to 2 or extra strains then strive setting the highest and backside row insets to 0 utilizing .listRowInsets:

ForEach(names) { title in
    Button {
        // do motion
    } label: {
        Textual content(title.title)
    }
    .listRowInsets(.init(high: 0, main: 16, backside: 0, trailing: 16)) // 👈 right here
}

Rows that match on 1 line will nonetheless have some vertical padding by advantage of the atmosphere worth defaultMinListRowHeight. That is the case for the primary line in your instance:

Screenshot

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments