Tenho enfrentado problemas no design de UI com SwiftUI. Acho que o UIKit é um pouco melhor quando comparado ao SwiftUI porque, usando o SwiftUI, não sou capaz de fornecer espaços adequados aqui, cada pilha calcula os espaços separadamente. Não entendo como dar espaços aos elementos vizinhos.
Minha principal questão é obter espaço de seu elemento vizinho. Precisamos fornecer espaço inicial para subtrair a área de largura do elemento vizinho?
Por exemplo, dei o início da pilha de imagens, topo para 20 e largura e altura 100. Agora, se eu quiser adicionar um rótulo que conduza a essa imagem, preciso fornecer espaços ao início do rótulo para -100? Como os espaços funcionarão para fornecer início, final, topo e fundo adequados?
Eu fiz um design simples como este usando UIKit aqui se você considerar apenas a imagem da pessoa com visualização azul superior como superior e levando a 20 e os rótulos e ícones restantes devem levar a essa visualização de imagem a 15
Agora tentei apenas o design da cor azul superior no SwiftUI : sou novo na interface do usuário, então tentei desta forma. Se houver algum atalho, por favor me avise.
Se houver algum código desnecessário, por favor me avise e me oriente como escrever códigos curtos usando SwiftUI.
E você poderia me orientar sobre como incorporar pilhas umas nas outras. Existe algum padrão para adicionar um dentro do outro?
Com esse código também não consegui o design adequado. Por favor, me guie para consertar isso.
struct SecondView: View {
var body: some View {
ZStack{
Color.yellow.ignoresSafeArea()
ScrollView{
VStack{
ZStack {
Color.blue // Background color of the view
VStack{
HStack (){
Image(systemName: "person.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 70, height: 70)
.padding(.leading, 10)
.padding(.top, 20)
Spacer()
}
Spacer()
}
VStack(spacing: 10){
Text("Jhon Thomas").foregroundColor(Color.white)
.padding(.bottom, 10).font(.system(size: 20))
HStack (){
Image(systemName: "phone.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("0000000000").foregroundColor(Color.white)
}
HStack (){
Image(systemName: "bag.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("Singer").foregroundColor(Color.white)
}
HStack (){
Image(systemName: "location.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("test loc").foregroundColor(Color.white)
Spacer()
Image(systemName: "map.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("Jhon Thomas").foregroundColor(Color.white)
}
}.padding()
// .padding(.leading, -80)
}.padding()
.frame(height: 200)
}
}
}
}
}
SwiftUI apenas design de cor azul: como fazer como acima projetar todos os nomes e ícones no mesmo alinhamento e levando apenas 15 à visualização da imagem?
Estou aqui para ajudar! Em primeiro lugar, sugiro que você aprenda o básico do SwiftUI aqui: Introdução ao SwiftUI e aqui: Tutorial do SwiftUI . Agora, vamos ao assunto em questão. Comecei a desenvolver iOS com SwiftUI e, acredite, agora que aprendi e uso o UIKit diariamente para trabalhar, não há pior coisa! Sobre o seu código, há muita coisa que pode ser melhorada. Aproveitei a oportunidade para escrever algum modificador personalizado para evitar repetir o mesmo modificador para imagens continuamente. Eu removi Stacks redundantes, criei uma Visualização recuperável para aqueles HStacks repetidos. Vou te mostrar agora:
E aqui está o modificador personalizado para imagens:
É claro que isso serve para lhe dar uma ideia de como realizar coisas no SwiftUI. Se você souber como usá-lo, poderá criar UIs muito, muito rápido . Meu ponto de vista é que ele oferece possibilidades quase ilimitadas de controlar cada pixel da tela.
Entrando em detalhes sobre o que fiz, substituí os espaçadores por um modificador de quadro especificando maxWidth ou maxHeight para ocupar todo o espaço disponível. O modificador de quadro também permite especificar o alinhamento. Além disso, a menos que você tenha como alvo o iOS 14, você pode usar foregroundStyle para modificar a cor da Visualização. Para o backgorund você pode fazer basicamente o mesmo, há um modificador de fundo também. O modificador de fundo é usado para desenhar coisas abaixo da visualização à qual está aplicado, enquanto o modificador de sobreposição desenha na parte superior. Você pode usar a macro @ViewBuilder para criar funções que retornem Views. Tenho uma resposta aqui que fala sobre isso: ViewBuilder .
Há muito a dizer, mas o melhor que você pode fazer é sujar as mãos e codificar bastante! Espero que minha resposta tenha sido útil para você amigo!