Jogando com o SwiftUI Part-1

Santosh Botre Blocked Desbloquear Seguir Seguindo 11 de junho

Atualizações :

Parte 2 – Jogando com TextField, SegmentControl, Toggle e Slider, Stepper no SwiftUI.

Parte 3 – Jogando com Contêineres como VStack, HStack e ZStack no SwiftUI

Em Introdução ao SwiftUI , discutimos o estilo de programação declarativa da interface do usuário.

Todos os controles do UIKit são bem conhecidos de todos os desenvolvedores. Além disso, o SwiftUI é uma estrutura de interface de usuário totalmente nova. Portanto, vamos conhecer os controles equivalentes do UIKit no SwiftUI.

Eu vou continuar atualizando …

Neste artigo, vamos ??? Texto, Botão e Imagem ???

?? texto

???????????? Vamos brincar com o texto ????????????

Nós vamos construir …

Uma exibição que exibe uma ou mais linhas de texto somente leitura.

? Para mostrar um texto simples

 Texto ("Hello World") 

? Texto com fonte personalizada

 Texto ("Hello World") 
 .font (.custom ("Helvetica-Bold", tamanho: 30)) 

? Adicione estilos diferentes, como fonte, peso da fonte e cor usando poderosos modificadores

 Texto ("Hello World") 
 .font (.title) // estilo da fonte 
 .fontWeight (.thin) // espessura do texto 
 .color (.gray) // cor do texto 
 .padding (. all) // preenchimento de todos os lados 

? Adicionar preenchimento duplo à cor de texto e de fundo

 Texto ("Hello World") 
 .color (.gray) 
 .padding () // preenchimento de todos os lados 
 .padding () // preenchimento em preenchimento de todos os lados 
 .background (cor amarela) 

Preste pouca atenção aos modificadores .color () & .background () . O .color () usa Color como um parâmetro e .background () usa View como um parâmetro.

? Adicione o pensionista redondo ao texto

 Texto ("Hello World") 
 .preenchimento() 
 .border (Color.red, width: 4, cornerRadius: 16) // limite para este ponto de vista 

? Colour full boarders to the Text

 Texto ("Hello World") 
 .font (.largeTitle) 
 .foregroundColor (branco) 
 .preenchimento() 
 .background (Color.blue) 
 .preenchimento() 
 .background (Color.green) 
 .preenchimento() 
 .background (Color.red) 

? Adicione mais estilo ao texto

 Texto ("Hello World com kerning") 
 .kerning (5) // A quantidade de espaçamento a ser usada entre caracteres individuais neste texto. 
 .baselineOffset (5) // A quantidade para mudar o texto verticalmente (para cima ou para baixo) em relação à sua linha de base. 
 .bold () // texto em negrito 
 .italic () // Italic Text 
 tachado ( true , color: .red) // rasurado e colorido para ele. 
 .underline () // sublinhado 
 .allowsTightening ( true ) // Define se o texto nessa visualização pode compactar o espaço entre os caracteres quando necessário para ajustar o texto em uma linha. 
 .opacity (0.6) // Transparência desta visão. 
 .cornerRadius (1) 

? Adicionar suporte multilinha com valor de cor RGB personalizado

 Texto ("Hello World com fonte pesada com cor amarela personalizada, com 2 linhas e preenchimento") 
 //.font(Font("Helvetica ", tamanho: 12)) 
 .fontWeight (pesado) 
 .color (Color.init (vermelho: 255/255, verde: 200/255, azul: 2/255)) 
 .lineLimit (2) 
 .padding (.leading) 

NOTA: Problema observado quando lineLimit é 2 exibe texto em 1 linha. No caso, lineLimit é 3 funciona perfeitamente bem.

? Multilin Text com espaçamento entre linhas personalizado

 Texto ("Text Hello World com fonte ultra leve com cor verde personalizada, texto multilinha com alinhamento à esquerda, com número infinito de linhas e preenchimento de todos os lados.") 
 .font (.subheadline) 
 .fontWeight (.ultraLight) 
 .color (Color.init (vermelho: 25/255, verde: 200/255, azul: 2/255)) 
 .multilineTextAlignment (.leading) 
 .lineLimit ( nulo ) 
 .lineSpacing (20) 
 .pad (todos os 

Dicas:

Ao trabalhar o framework SwiftUI, você precisa ser muito paciente na maior parte do tempo. Erros não são compatíveis com o desenvolvedor neste momento.

Exemplo:

 Texto ("Hello World") 
 .font (.custom ("Helvetica-Bold", tamanho: 30)) 
 .padding (.leading) 
 .background (.red) 

Ele mostra um erro “Função declara um tipo de retorno opaco, mas não possui instruções de retorno em seu corpo a partir do qual inferir um tipo subjacente”

O modificador .background () tem uma visão como argumento e não como a Cor.

?? Botão

???????????? Vamos brincar com o botão ????????????

Nós vamos construir …

Um controle que executa uma ação quando acionado.

? Para mostrar um simples botão

 struct SimpleButton: Ver { 
 @State var title: String 
 var body: some Ver { 
 VStack { 
 Botão (ação: { 
 self .title = "Botão de planejamento" 
 }) { 
 Texto ("Clique-me") 
 } 
}
}
}

? Para mostrar um botão com cor de fundo

 struct SimpleButton: Ver { 
 @State var title: String 
 var body: some Ver { 
 Botão (ação: { 
 self .title = "Botão de fundo" 
 }) { 
 Texto ("Clique-me") 
 .preenchimento() 
 .background (cor amarela) 
 } 
 } 
 } 
 } 

? Para mostrar um botão com borda

 struct ButtonWithBorder: Visualizar { 
 @State var title: String 
 var body: some Ver { 
 Botão (ação: { 
 self .title = "Tapped" 
 }) { 
 Texto ("Clique-me") 
 .font (.title) 
 .cor verde) 
 .preenchimento() 
 .border (Color.red, largura: 4, cornerRadius: 10) 
 } .padding (.top) // Adicionando padding ao topo 
 } 
 } 

? Para mostrar um botão com o ícone do sistema (SF Symbol) à esquerda, direita, superior e inferior

 struct ButtonWithIcon: Visualizar { 
 @State var title: String 
 var body: some Ver { 
 HStack { 
 // Button com ícone no bootom 
 Botão (ação: { 
 self .title = "Botão com o ícone no bootom" 
 }) { 
 Livro didático") 
 Imagem (systemName: "book.fill") 
 }.preenchimento() 
 // Botão com o ícone no topo com borda 
 Botão (ação: { 
 self .title = "Botão com o ícone no topo" 
 }) { 
 Imagem (systemName: "book.fill") 
 Livro didático") 
 } .padding (). border (Color.green, width: 1, cornerRadius: 10) 
 // Botão com ícone à esquerda 
 Botão (ação: { 
 self .title = "Botão com ícone à esquerda" 
 }) { 
 HStack { 
 Imagem (systemName: "book.fill") 
 Texto ("Livro"). FontWeight (.light) 
 } 
 }.preenchimento() 
 // Botão com o ícone à direita 
 Botão (ação: { 
 self .title = "Botão com o ícone à direita" 
 }) { 
 HStack { 
 Texto ("Livro"). FontWeight (.light) 
 Imagem (systemName: "book.fill") 
 } 
 }.preenchimento() 
 } 
 } 
 } 

? Para mostrar um botão com apenas uma imagem

 struct ButtonWithOnlyImage: Visualizar { 
 @State var title: String 
 var body: some Ver { 
 // 
 Botão (ação: { 
 auto .title = "estrela" 
 }) { 
 Imagem (systemName: "star.fill") 
 .imageScale (.small) 
 } 
 } 
 } 

?? Imagem

???????????? Vamos brincar com a imagem ????????????

Nós vamos construir …

Uma exibição que exibe uma imagem dependente do ambiente.

? Para mostrar uma imagem simples

 struct SimpleImage: Visualizar { 
 var body: some Ver { 
 Imagem ("relógio de maçã") 
 } 
 } 

? Para mostrar um ícone do sistema

 struct SystemIconImage: Visualizar { 
 var body: some Ver { 
 Imagem (systemName: "faceid") 
 .font (.title) 
 } 
 } 

? Para mostrar um ícone do sistema com tamanho personalizado

 struct SystemIconImageWithStyle: Visualizar { 
 var body: some Ver { 
 Imagem (systemName: "faceid") 
 .foregroundColor (.blue) 
 .font (.system (tamanho: 100)) 
 } 
 } 

? Para mostrar um ícone do sistema com efeito de desfoque e cor de primeiro plano

 struct SystemIconImageWithStyleBlur: Visualizar { 
 var body: some Ver { 
 Imagem (systemName: "person.icloud.fill") 
 .blur (raio: 1) 
 .foregroundColor (. amarelo) 
 .font (.largeTitle) 
 } 
 } 

? Para mostrar uma imagem grande

 struct StyledImage: Ver { 
 var body: some Ver { 
 Imagem ("turtlerock") 
 .resizable () 
 .aspectRatio (contentMode: .fill) 
 } 
 } 

? Para mostrar uma imagem grande com moldura definida

 struct ImageWithCustomSize: Visualizar { 
 var body: some Ver { 
 Imagem ("marco") 
 .resizable () 
 .frame (largura: 100, altura: 100, alinhamento: .center) 
 } 
 } 

Espero que dê glims do que você pode fazer com SwiftUI…

Temos muito mais para cobrir nos próximos artigos… Fique afinado… ..