Início / coding / Perguntas / 79557197
Accepted
Deepak Sharma
Asked: 2025-04-05 23:42:57 +0800 CST

SwiftUI ScrollView scrollTargetLayout não está funcionando

  • 772

Tenho a seguinte implementação de scrubber no SwiftUI. O +botão deve mover para ScrollViewcima em 1 tick (ou scrollPositionincrementado em 1), mas o problema é que não há rolagem até que eu clique 8-9 vezes. Isso é um bug no iOS ou um erro de programação?


struct BrokenVerticalScrubberDemo: View {
    @State private var scrollPosition: Int? = 0
    @State private var count: Int = 20

    var body: some View {
        VStack {
            Text("Scroll Position: \(scrollPosition ?? 0)")
                .font(.headline)

            ScrollView(.vertical, showsIndicators: true) {
                VStack(spacing: 8) {
                    ForEach(0..<count, id: \.self) { index in
                        Text("Tick \(index)")
                            .frame(height: 30)
                            .id(index)
                    }
                }
                .scrollTargetLayout()
                .padding(.vertical, 50)
            }
            .scrollTargetBehavior(.viewAligned)
            .scrollPosition(id: $scrollPosition)
            .frame(height: 300)
            .border(Color.gray)

            Button("+1") {
                withAnimation {
                    scrollPosition = min((scrollPosition ?? 0) + 1, count - 1)
                }
            }
            .padding(.top)
        }
        .padding()
    }
}

#Preview {
    BrokenVerticalScrubberDemo()
}

Por outro lado, se eu usar ScrollViewReadercomo solução alternativa, ele começa a rolar após 2 toques no botão '+'.

import SwiftUI

struct SomeWhatWorkingVerticalScrubberDemo: View {
    @State private var scrollPosition: Int = 0
    @State private var count: Int = 20

    var body: some View {
        VStack {
            Text("Scroll Position: \(scrollPosition)")
                .font(.headline)

            ScrollView(.vertical, showsIndicators: true) {
                ScrollViewReader { scrollViewProxy in
                    VStack(spacing: 8) {
                        ForEach(0..<count, id: \.self) { index in
                            Text("Tick \(index)")
                                .frame(height: 30)
                                .id(index)
                        }
                    }
                    .padding(.vertical, 50)
                    .onChange(of: scrollPosition) { newPosition in
                        withAnimation {
                            scrollViewProxy.scrollTo(newPosition, anchor: .center)
                        }
                    }
                }
            }
            .frame(height: 300)
            .border(Color.gray)

            Button("+1") {
                scrollPosition = min(scrollPosition + 1, count - 1)
            }
            .padding(.top)
        }
        .padding()
    }
}

#Preview {
    SomeWhatWorkingVerticalScrubberDemo()
}

2 respostas

  1. Best Answer

    Por favor, tente usar a âncora superior

    .scrollPosition(id: $scrollPosition, anchor: .top)

    na posição de rolagem.

    A documentação sobre o comportamento da âncora padrão é um pouco enigmática para mim. Mas no seu exemplo parece ser a âncora inferior.

     /// If no anchor has been provided, SwiftUI will scroll the minimal amount
 /// when using the scroll position to programmatically scroll to a view.
    • 2

  2. Adicionar uma âncora pode corrigir a rolagem dos botões, mas não corrige realmente a falha no layout e no uso geral do controle deslizante, já que você nunca poderá selecionar todo o intervalo de valores (como 0 ou qualquer valor acima de 13).

    Além disso, se você arrastar o controle deslizante (sem usar o botão), os valores não serão alinhados corretamente. Eles avançam dois valores por vez ou exigem que você arraste mais de duas etapas para aumentá-los em uma etapa, conforme mostrado na gravação abaixo.

    insira a descrição da imagem aqui

    Há também o problema de que definir um valor padrão para scrollPositionnão funciona assim. No seu exemplo, você o define como zero e o mostra como zero ao desembrulhá-lo no Text, mas na realidade ele ainda é nil.

    Então, se você precisasse rolar para o 5º tick inicialmente definindo o scrollPositionvalor padrão para 5, não funcionaria. Para realmente fazer funcionar, deixe-o sem valor padrão e defina um valor inicial em .onAppearof ScrollView.

    O alinhamento da visualização (se implementado corretamente) deve funcionar com qualquer âncora (ou mesmo sem âncora). Nesse caso, qualquer âncora diferente .topbasicamente não funcionará (e até mesmo .top tem os problemas descritos acima).

    O culpado por tudo isso é o preenchimento vertical adicionado ao VStackque é usado para o destino do layout:

    .padding(.vertical, 50) // <- breaks everything

    Aqui está um código completo que reproduz o problema, com opções para selecionar diferentes âncoras:

    insira a descrição da imagem aqui

    import SwiftUI

struct DamagedVerticalScrubberDemo: View {
    
    //State values
    @State private var scrollPosition: Int? = 0
    @State private var count: Int = 20
    @State private var selectedAnchor: UnitPoint?
    
    //Body
    var body: some View {
        let step = 1
        let range = 0...count
        
        VStack {
            Text("Scroll Position: \(scrollPosition ?? 0)")
                .font(.headline)
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 8) {
                    ForEach(0..<count, id: \.self) { index in
                        Text("Tick \(index)")
                            .frame(height: 30)
                            // .border(.red)
                            .id(index)
                    }
                }
                // .border(.green)
                .padding(.vertical, 50)
                .scrollTargetLayout()
            }
            .scrollTargetBehavior(.viewAligned)
            .scrollPosition(id: $scrollPosition, anchor: selectedAnchor)
            .frame(height: 300)
            .frame(maxWidth: .infinity, alignment: .center)
            .overlay {
                Divider()
            }
            .border(Color.gray)
            
            VStack {
                Stepper(
                    value: Binding(
                        get: { scrollPosition ?? 0 },
                        set: { newValue in
                            withAnimation {
                                scrollPosition = newValue
                            }
                        }),
                    in: range,
                    step: step
                ){}
                    .fixedSize()
                    .padding(.top)
                
                Text("Adjust scroll position")
                    .font(.caption2)
                    .foregroundStyle(.secondary)
                
                Picker("", selection: $selectedAnchor) {
                    Text("Select anchor").tag(nil as UnitPoint?)
                    Label("Top anchor", systemImage: "inset.filled.topthird.rectangle").tag(UnitPoint.top)
                    Label("Center anchor", systemImage: "inset.filled.center.rectangle").tag(UnitPoint.center)
                    Label("Bottom anchor", systemImage: "inset.filled.bottomthird.rectangle").tag(UnitPoint.bottom)
                }
                .padding(.top)
            }
        }
        .padding()
    }
}

#Preview {
    DamagedVerticalScrubberDemo()
}

    A solução:

    A correção é bem simples e consiste em remover qualquer preenchimento de VStacke, em vez disso, adicionar margens ao ScrollView, considerando a altura de cada tick, para centralizar tudo verticalmente e permitir a seleção de todo o intervalo de valores. Então, neste caso, seria:

    ScrollView {
    //content...
}
.contentMargins(.vertical, (300 - 30) / 2)

    insira a descrição da imagem aqui

    Aqui está o código de trabalho completo:

    import SwiftUI


struct FixedVerticalScrubberDemo: View {
    
    //Values
    let step = 1
    let range = 1...20
    let scrollViewHeight: CGFloat = 300
    let tickHeight: CGFloat = 30

    //State values
    @State private var scrollPosition: Int?
    @State private var showInfoOverlay = false
    
    //Computed values
    private var margins: CGFloat {
        (scrollViewHeight - tickHeight) / 2
    }
    
    var body: some View {
        VStack {
            Text("Scroll Position: \(scrollPosition ?? 0)")
                .font(.headline)
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 8) {
                    ForEach(range, id: \.self) { index in
                        Text("Tick \(index)")
                            .padding()
                            .frame(height: tickHeight)
                            .scrollTransition(.animated) { content, phase in
                                content
                                    .opacity(phase.isIdentity ? 1 : 0.3)
                                    .blur(radius: phase.isIdentity ? 0 : 0.5)
                                    .scaleEffect(phase.isIdentity ? 1.2 : 1)
                            }
                            .id(index)
                    }
                }
                .scrollTargetLayout()
            }
            .contentMargins(.vertical, margins)
            .scrollTargetBehavior(.viewAligned)
            .scrollPosition(id: $scrollPosition)
            .frame(height: scrollViewHeight)
            .frame(maxWidth: .infinity, alignment: .center)
            .background {
                Divider()
                    .background(.gray)
                    .overlay{
                        Capsule()
                            .fill(Color(.systemBackground))
                            .stroke(.gray.opacity(0.5))
                            .frame(width: 100, height: tickHeight)
                    }
            }
            .overlay {
                if showInfoOverlay {
                    infoOverlay
                }
            }
            .onAppear { // <- set default scrollPosition value here
                scrollPosition = 1
            }
            .border(Color.gray)
            .animation(.smooth, value: scrollPosition)
            
            //Stepper
            HStack {
                
                Button("First") {
                    scrollPosition = range.lowerBound
                }
                .disabled(scrollPosition == range.lowerBound)
                
                Stepper(
                    value: Binding(
                        get: { scrollPosition ?? 0 },  // If the optional is nil, default to 0
                        set: { newValue in
                            withAnimation {
                                scrollPosition = newValue  // Apply animation when value changes
                            }
                        }),
                    in: range,
                    step: step
                ) {}
                    .labelsHidden()
                    .fixedSize()
                    .padding()
                
                Button("Last") {
                    scrollPosition = range.upperBound
                }
                .disabled(scrollPosition == range.upperBound)
            }
            .buttonStyle(.bordered)
            .buttonBorderShape(.roundedRectangle(radius: 12))
            
            //Overlay toggle
            Toggle("Show info overlay", isOn: $showInfoOverlay)
                .padding()
        }
        .padding()
    }
    
    private var infoOverlay: some View {
        VStack(spacing: 0) {
            Color.indigo
                .frame(height: margins)
                .overlay {
                    Text("Top margins/padding")
                }
                .opacity(0.5)
            
            Color.yellow.opacity(0.1)
                .frame(height: tickHeight)
            
            Color.indigo
                .frame(height: margins)
                .overlay {
                    Text("Bottom margins/padding")
                }
                .opacity(0.5)
        }
    }
}

#Preview("Explanation") {
    FixedVerticalScrubberDemo()
}

    Observe que uma âncora não foi usada no código acima, porque ela não é realmente necessária neste caso de uso, onde as marcas de seleção são centralizadas na scrollview.

    Para recapitular:

    • Use para ajustar .contentMarginso ScrollViewpreenchimento com base nas dimensões da scrollview e no tamanho da visualização individual.

    • Defina um valor de posição de rolagem padrão na .onAppearvisualização de rolagem.

    insira a descrição da imagem aqui

    • 0

relate perguntas