Familiarize-se com o SwiftUI criando uma página de perfil básica.

SwiftUI

SwiftUI é a nova estrutura de interface de usuário da Apple lançada em 2019. Seu principal objetivo é fornecer aos desenvolvedores uma maneira natural de criar interfaces de usuário com visualizações ao vivo sem usar storyboards.

O que você precisa

Antes de começar, certifique-se de ter

• Xcode 11 ou posterior
• macOS Catalina para visualizações ao vivo

Crie um projeto SwiftUI como um projeto de aplicativo iOS normal, mas certifique-se de que a interface seja SwiftUI em vez de Storyboard :

1. Abra o Xcode
2. Criar um novo projeto Xcode
3. Selecione o aplicativo e clique em Avançar
4. Nomeie o projeto como quiser
5. Certifique-se de que a Interface seja SwiftUI:

Agora seu projeto se parece com isso:

A tela em branco à direita é a página de visualização ao vivo. Para começar a visualizar seu aplicativo ao vivo, basta clicar Resumeno canto superior direito e aguardar um ou dois segundos:

Quando você vê uma tela do iPhone aparecer na página em branco, sua visualização ao vivo está pronta. A partir de agora, todas as alterações feitas devem ser refletidas na visualização ao vivo quase que instantaneamente. Não é conveniente?

Vamos começar a codificar

Abra o ContentView.swiftarquivo. Este é o arquivo onde toda a codificação da interface do usuário ocorrerá.

Existem dois struct's neste arquivo, a saber, ContentViewe ContentView_Previews.

• O ContentViewé responsável pelo conteúdo e layout da tela. Basicamente, você constrói a interface do usuário do seu aplicativo dentro da propriedade ContentView's bodyusando elementos de interface do usuário adequados.
• Como o nome sugere, ContentView_Previews é responsável por criar a visualização ao vivo. Ele simplesmente cria uma visão que contém uma instância de ContentViewpara mostrá-la.

Vamos criar uma página de perfil com uma imagem de perfil, nome e algumas informações adicionais.

1. Arraste alguma imagem de perfil para a Assets.xcassetspasta (esta pasta está no lado esquerdo no navegador do projeto )
2. Ajuste o seu ContentViewsubstituindo o texto padrão Hello world pela sua imagem de perfil:

struct ContentView: View {
    var body: some View {
        Image("profile_pic") // YOUR PICTURE NAME HERE
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(Circle()) // Make the picture circular
    }
}

• Pilha vertical para posicionamento vertical,VStack
• Pilha horizontal para posicionamento horizontal,HStack
• Pilha sobreposta para posicionar elementos uns sobre os outros,ZStack

struct ContentView: View {
    var body: some View {
        VStack{
            Image("profile_pic")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .clipShape(Circle())
            Text("Artturi Jalli")
                .foregroundColor(.black)
                .font(.title)
            Text("iOS Engineer")
                .foregroundColor(.gray)
                .font(.subheadline)
        }
    }
}

Agora sua página de perfil básico está pronta e deve ser algo assim.

É isso!

Espero que você ache útil. Dê algumas palmas para que outros também o encontrem!

Certifique-se de me seguir no Medium para não perder nada. Além disso, vamos ser amigos no Linkedin .

Referências