Folhas personalizadas para SwiftUI

Mar 09 2023

Você já quis criar uma planilha personalizada com altura dinâmica no SwiftUI? Como a Apple fornece um componente Sheet nativo, é fácil usá-lo para projetar qualquer tipo de planilha personalizada de que precisamos em nosso aplicativo iOS. No entanto, nem sempre foi assim.

No entanto, nem sempre foi assim. As versões mais antigas do iOS, como o iOS 14, não oferecem suporte a essa funcionalidade. Portanto, se o seu aplicativo oferece suporte a essas versões do iOS, você não pode se dar ao luxo de resolver esse problema perfeitamente. Mas não se preocupe! Depois de ler este artigo, você poderá obter planilhas com altura dinâmica em qualquer iOS compatível com SwiftUI! Vamos tentar.

Criar planilhas personalizadas não é nada complicado. Basta seguir meus passos.

Etapa 1: criar uma nova exibição para a folha inferior

Primeiro precisamos criar um novo arquivo SwiftUI View, então dividimos nosso código em vários arquivos. Chamei o meu de “BottomSheetView”, você pode chamar o seu como quiser.

Você deve ver algo semelhante como ponto de partida. Vamos agora começar a criar.

Etapa 2: exibição de codificação

Vamos criar um VStack simples e adicionar alguns modificadores de visualização a ele.

Além disso, é importante observar que esse VStack precisa ser incorporado em outra exibição de pilha porque nossa planilha inferior precisa preencher a tela inteira. Vou embuti-lo no ZStack. Também não vamos esquecer de colocar fundo branco em nosso VStack.

Etapa 3: criar uma variável de vinculação na exibição pai e passá-la para nossa planilha inferior

Nossa folha inferior deve ser visível apenas quando acionada por alguma ação.
Então, vamos adicionar algum código à nossa planilha.

No início de View adicione a seguinte linha:

@Binding var isShowing: Bool

Etapa 4: chame nosso BottomSheetView na exibição pai

É importante mencionar que qualquer visualização pai onde você deseja chamar nossa visualização inferior precisa ter o ZStack como pilha de visualização raiz. Com a ajuda do ZStack, nossa planilha inferior irá “substituir o conteúdo abaixo dela”.

No ZStack, em sua visão pai, basta chamar seu BottomSheetView. Como você pode se lembrar da Etapa 3, precisamos fornecer algum bool de vinculação ao nosso BottomSheetView. Portanto, crie alguma variável de ligação no início da exibição pai.

@State var isShowingBottomSheet: Bool = false

Button {
    isShowingBottomSheet = true
} label: {
    Text(“Show bottom sheet”)
}
.buttonStyle(.borderedProminent)

Como você pode ver na captura de tela acima, nossa folha parece horrível. Vamos melhorá-lo.

Em nosso BottomSheetView ZStack acima do VStack adicione o seguinte código

Color.black
    .opacity(0.3)
    .ignoresSafeArea()
    .onTapGesture {
        isShowing = false
    }

.animation(.easeInOut)

.transition(.move(edge: .bottom))

O uso é bem simples, basta chamá-lo como ViewModifier normal e passar outro parâmetro 'corners'. Vamos adicioná-lo ao nosso código.

.cornerRadius(8, corners: [.topLeft, .topRight])

.frame(height: 250)

E aí está! Agora você pode criar qualquer tipo de planilha que desejar para qualquer iOS compatível com SwiftUI e personalizá-la ao seu gosto.
Há muito espaço para editar. Você pode adicionar um título e um botão de fechamento na parte superior.