SwiftUI reduz a visualização ao arrastar bordas

Para que o quadro de fundo mude em coordenação com o gesto de arrastar, você precisa ajustar a largura do fundo conforme o arrasto acontece. No momento, a largura é fixa, então nenhuma mudança é vista.

Eu sugeriria as seguintes mudanças:

• Use a GestureStatevariável para registrar o deslocamento do arrasto. Isso é automaticamente redefinido para 0 quando o gesto de arrastar termina, o que é conveniente.

• Use o deslocamento de arrasto para controlar o preenchimento inicial, em vez de aplicar um deslocamento x.

• O mesmo preenchimento inicial deve ser aplicado ao aparador (chevron) e também ao fundo preenchido.

• O fundo preenchido pode ser desenhado como um RoundedRectangle, em vez de usar uma forma de clipe. Isso facilita a aplicação do padding.

Aqui está uma versão atualizada:

struct SimpleTrimmer: View {
    let frameWidth:CGFloat = 300
    @State private var leftPadding: CGFloat = 0
    @GestureState private var dragOffset: CGFloat = 0

    private var leadingPadding: CGFloat {
        max(0, leftPadding + dragOffset)
    }

    var body: some View {
        HStack(spacing: 10) {
            Image(systemName: "chevron.compact.left")
                .frame(width: 30, height: 70)
                .background(Color.blue)
                .padding(.leading, leadingPadding)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($dragOffset) { value, state, trans in
                            state = value.translation.width
                        }
                        .onEnded { value in
                            leftPadding = max(0, leftPadding + value.translation.width)
                        }
                )

            Spacer()

            Image(systemName: "chevron.compact.right")
                .frame(width: 30, height: 70)
                .background(Color.blue)
        }
        .foregroundColor(.black)
        .font(.title3.weight(.semibold))
        .padding(.horizontal, 7)
        .padding(.vertical, 3)
        .background {
            RoundedRectangle(cornerRadius: 7)
                .fill(.yellow)
                .padding(.leading, leadingPadding)
        }
        .frame(width: frameWidth)
    }
}

EDITAR Seguindo seu comentário, tentei adicionar um gesto de arrastar ao aparador (chevron) à direita, esperando que o preenchimento final pudesse ser ajustado da mesma forma que o preenchimento inicial acima.

Quando tentei, o movimento do aparador era instável. Acho que a razão para isso é porque há uma interdependência entre o tamanho do espaçador e o acolchoamento nos aparadores. Embora parecesse funcionar para o caso do acolchoamento principal, não funciona bem com o acolchoamento posterior.

Funciona melhor se você definir um x-offset nos trimmers, como você estava usando originalmente. Isso significa encontrar nomes melhores para as variáveis ​​de estado também!

Aqui está uma versão atualizada com gestos de arrastar em ambos os aparadores:

struct SimpleTrimmer: View {
    let frameWidth:CGFloat = 300
    @State private var leftOffset: CGFloat = 0
    @State private var rightOffset: CGFloat = 0
    @GestureState private var leftDragOffset: CGFloat = 0
    @GestureState private var rightDragOffset: CGFloat = 0

    private var leftAdjustment: CGFloat {
        max(0, leftOffset + leftDragOffset)
    }

    private var rightAdjustment: CGFloat {
        max(0, rightOffset - rightDragOffset)
    }

    var body: some View {
        HStack(spacing: 10) {
            Image(systemName: "chevron.compact.left")
                .frame(width: 30, height: 70)
                .background(Color.blue)
                .offset(x: leftAdjustment)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($leftDragOffset) { value, state, trans in
                            state = value.translation.width
                        }
                        .onEnded { value in
                            leftOffset = max(0, leftOffset + value.translation.width)
                        }
                )

            Spacer()

            Image(systemName: "chevron.compact.right")
                .frame(width: 30, height: 70)
                .background(Color.blue)
                .offset(x: -rightAdjustment)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($rightDragOffset) { value, state, trans in
                            state = value.translation.width
                        }
                        .onEnded { value in
                            rightOffset = max(0, rightOffset - value.translation.width)
                        }
                )
        }
        .foregroundColor(.black)
        .font(.title3.weight(.semibold))
        .padding(.horizontal, 7)
        .padding(.vertical, 3)
        .background {
            RoundedRectangle(cornerRadius: 7)
                .fill(.yellow)
                .padding(.leading, leftAdjustment)
                .padding(.trailing, rightAdjustment)
        }
        .frame(width: frameWidth)
    }
}