También podemos aprovechar los ícenos del sistema para crear estos botones.
Image(systemName: "chevron.right") .foregroundColor(.white)
Introducción al curso
Construyamos una app para iOS
Introducción a la arquitectura MVVM
Planeando nuestra app
Creando las primeras pantallas de la app
Programando la primera pantalla en módulos
Escribiendo la lógica para mostrar dos pantallas
Pantalla de inicio de sesión con SecureField y Scroll
Completando nuestra pantalla de inicio de sesión
Pantalla de registro de usuario
Comprobando el funcionamiento de nuestras pantallas
Estructura de las pantallas con TabView
Creando nuestra pantalla home
Pantalla home: logo y barra de búsqueda
Pantalla home: programación de interfaces estáticas
Pantalla home: carruseles
Aplicando arquitectura MVVM
Creando estructura para arquitectura MVVM
Modelando nuestro JSON
Peticiones al servidor
Mostrar información de un servidor de manera dinámica
Mostrar imágenes de forma dinámica y eficiente con LazyVGrid
Reproductor y búsqueda de video
Pasar datos entre pantallas
Darle datos de inicio a un Canvas
Reproducir videos dinámicamente de un servidor
Mostrar imágenes dinámicamente de un servidor
Mostrar alertas
Programar clase de búsqueda
Programar método de búsqueda
Últimas pantallas de la app
Pantalla de favoritos
Pantalla de perfil de usuario
Módulo de ajustes de perfil con Toggle
Pantalla de edición de perfil
Módulo de edición de perfil
Guardado interno de datos
Utilizando la cámara y fotos del iPhone
Captura de foto de perfil: ImagePicker y vista Sheet
Captura de foto de perfil con la cámara: modificar librerías de terceros
Captura de foto de perfil con la cámara: recuperar imágenes guardadas
¿Qué más posibilidades tiene SwiftUI?
Mejoremos nuestra app
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Módulo de ajustes de perfil con Toggle
29/36Recursos
Aportes 5
Preguntas 1
Ordenar por:
No puedo con ese código repetido, les dejo un elemento que recibe el texto y el elemento de la derecha para no repetir el código.
struct SettingsButton<Content: View>:View {
var label: String
var rigthModifier: Content
var action: () -> Void
var body: some View{
VStack{
Button(action: action, label: {
HStack{
Text(label)
.foregroundColor(.white)
Spacer()
rigthModifier
}.padding()
})
.frame(width: .infinity, height: 48, alignment: .leading)
.background(Color("BlueGray"))
.clipShape(RoundedRectangle(cornerRadius: 1))
}
}
}
SettingsButton(label: "Notificaciones",
rigthModifier: Toggle("", isOn: $areNotificationsEnabled),
action:{})
SettingsButton(label: "Editar Perfil",
rigthModifier: RigthArrow(),
action:{isEditProfileViewActive=true})
Les comparto la forma en la que lo hice para no repetir tanto código.
La estructura SettingsOption contiene la lógica de los botones
La estructura SettingsModule es donde se crean los botones llamando a SettingsOption
La estructura ProfileView contiene la sección superior con la foto y el nombre, para luego invocar a SettingsModule
//
// ProfileView.swift
// GameStream
//
// Created by Nicolas Hernandez on 20/10/22.
//
import SwiftUI
struct ProfileView: View {
var body: some View {
ZStack{
Color("marine").ignoresSafeArea()
VStack{
Text("PROFILE")
.font(.title2)
.fontWeight(.bold)
.foregroundColor(.white)
.padding(EdgeInsets(
top: 16,
leading: 0,
bottom: 50,
trailing: 0
)
)
Image("profile")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100, height: 100)
Text("@nicolashch")
.font(.headline)
.fontWeight(.regular)
.foregroundColor(.white)
.padding(EdgeInsets(
top: 0,
leading: 0,
bottom: 50,
trailing: 0
)
)
SettingsModule()
}.padding(.horizontal, 20)
}
}
}
struct SettingsModule: View {
var body: some View {
VStack(alignment: .leading) {
Text("SETTINGS")
.font(.title3)
.fontWeight(.semibold)
.foregroundColor(.white)
.padding(.leading, 20.0)
SettingsOption(option: "Account")
SettingsOption(option: "Notifications")
SettingsOption(option: "Edit profile")
SettingsOption(option: "Rank this app")
}
}
}
struct SettingsOption: View {
@State var isEditProfileViewActive = false
@State var isToggleOn = true
var option: String
var iconName: String = "chevron.right"
var body: some View {
Button(action: {
if option == "Edit profile" {
isEditProfileViewActive = true
}
}, label: {
HStack {
Text("\(option)")
.font(.headline)
.fontWeight(.regular)
.foregroundColor(.white)
Spacer()
if option == "Notifications" {
Toggle("", isOn: $isToggleOn)
} else {
Image(systemName: iconName)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
.foregroundColor(.white)
}
}
.padding(EdgeInsets(
top: 0,
leading: 20,
bottom: 0,
trailing: 20
)
)
.frame(width: 375, height: 50, alignment: .leading)
.background(Color("gray_blue"))
.clipShape(RoundedRectangle(cornerRadius: 5))
}).padding(.bottom,10)
NavigationLink(destination: GamesView(), isActive: $isEditProfileViewActive, label: {})
}
}
struct ProfileView_Previews: PreviewProvider {
static var previews: some View {
ProfileView()
}
}
Usando los íconos de SFSymbols:
Button(action: {}) {
HStack {
Text("Califica esta aplicacion")
.foregroundColor(.white)
Spacer()
Image(systemName: "chevron.right")
.foregroundColor(.white)
}
.padding()
.background(Color("blueGray"))
.clipShape(RoundedRectangle(cornerRadius: 1.0))
}
Me estresa ver que deja tantos espacios, se ve sucio el codigo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?