Как стилизовать кнопку с фоном, который анимируется и исчезает при нажатии?

Теперь у меня есть эта кнопка:

Когда он нажат, я хочу, чтобы «фон» был удален, например:

Как бы я это сделал? Я не могу заставить его работать. Теперь я добавляю фон, используя ZStack, что тоже не так уж приятно, потому что мне нужно инициализировать Button дважды.

Это путь размножения:

import Foundation
import SwiftUI

struct TestButton<V: View>: View {
    @Environment(\.colorScheme) var colorScheme: ColorScheme

    let content: V
    var foregroundStyle: Color? = nil

    var body: some View {
        ZStack {
            Button(action: {} ) {
                content
            }
            .padding(10)
            .background(Color(red: 0, green: 0, blue: 255/255))
            .applyDefaultCornerRadius()
            .offset(y: 5)

            Button(action: {}) {
                content
            }
            .padding(10)
            .background(Color.blue)
            .applyDefaultCornerRadius()
            .foregroundStyle(foregroundStyle ?? (colorScheme == .light ? Color.white : Color.black))
        }
    }
}

#Preview {
    TestButton(content: Text(verbatim: "Test"))
}

swift swiftui

30.07.2024 13:06

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы применять разные стили при нажатии кнопки, вам необходимо определить свой собственный ButtonStyle.

В вашем примере хорошо работает изменение TestButton из общей оболочки Button в ButtonStyle. Используйте модификатор .animation, если хотите управлять фактической анимацией. Скорость анимации может зависеть от нажатого состояния — возможно, вам захочется, чтобы анимация выполнялась медленнее при подъеме нажатия.

struct TestButton: ButtonStyle {
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    var foregroundStyle: Color? = nil

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundStyle(foregroundStyle ?? (colorScheme == .light ? Color.white : Color.black))
            .padding(10)
            .background {
                RoundedRectangle(cornerRadius: 6)
                    .fill(.blue)
                    .stroke(foregroundStyle ?? (colorScheme == .light ? Color.black : Color.white))
            }
            .offset(y: configuration.isPressed ? 0 : -5)
            .background {
                RoundedRectangle(cornerRadius: 6)
                    .fill(Color(red: 0, green: 0, blue: 255/255))
                    .stroke(Color(red: 0, green: 0, blue: 255/255))
            }
            .animation(
                .spring(duration: configuration.isPressed ? 0.05 : 0.2),
                value: configuration.isPressed
            )
    }
}

struct ContentView: View {
    var body: some View {
        Button {} label: {
            Text("Test")
        }
        .buttonStyle(TestButton())
    }
}

Animation