Muy buenas, soy Luis y para hoy les traigo un artículo.
Índice
Las vistas personalizadas son geniales, pero ¿Cómo podemos hacer que se sientan más rápidas?
SwiftUI es realmente flexible y ofrece más de una forma de personalizar sus vistas. Nos permite apoyarnos en Swift para impulsar realmente la sintaxis declarativa y crear vistas reducidas.
Veremos tres formas de hacer exactamente lo mismo: personalizar un texto para que coincida con la marca de nuestra empresa. Este texto de encabezado se utilizará en toda la aplicación en varios lugares.
Vistas personalizadas
Una de las formas más sencillas de personalizar sus vistas es simplemente crear vistas personalizadas. Puede dividir sus vistas en pequeños fragmentos con todas sus propiedades preestablecidas y luego reutilizarlas siempre que sea posible.
Este patrón se puede repetir en toda la aplicación para dividir todo en compartimentos, lo que ayuda a depurar las vistas y mover las cosas si desea cambiarlas más adelante.
// Container View struct SomeView: View { var body: some View { VStack { Text("Welcome to our SwiftUI app") .font(.custom("Montserrat-Bold", size: 16)) .foregroundColor(.textBlack) .padding() FeaturedContentView() ArticlesScrollView() FooterView() } } } // New Custom View struct CompanyHeader: View { var text: String var body: some View { Text(text) .font(.custom("Montserrat-Bold", size: 16)) .foregroundColor(.textBlack) .padding() } } // Result struct SomeView: View { var body: some View { VStack { CompanyHeader(text: "Welcome to our SwiftUI app") FeaturedContentView() ArticlesScrollView() FooterView() } } }
Si bien esto es solo una pequeña diferencia, si lo sigue en todas partes, puede crear un código muy fácil de leer.
Ver modificadores
SwiftUI nos permite crear nuestros propios modificadores de vista que se pueden reutilizar en una base de código. Esto reemplazaría nuestro uso de vistas personalizadas y proporcionaría un enfoque más funcional.
Crear un modificador de vista es fácil. Simplemente crea una estructura que se ajuste a ViewModifier
una sola función body(content: Content) -> some View
,.
Dentro de esta función, puede hacer lo que quiera con el contenido y devolverlo.
Veamos cómo se vería la vista personalizada anterior que creamos como ViewModifier
:
// Container View struct SomeView: View { var body: some View { VStack { Text("Welcome to our SwiftUI app") .modifier(CompanyHeaderLabel()) FeaturedContentView() ArticlesScrollView() FooterView() } } } // ViewModifier struct CompanyHeaderLabel: ViewModifier { func body(content: Content) -> some View { content .font(.custom("Montserrat-Bold", size: 16)) .foregroundColor(.textBlack) .padding() } }
El código resultante es similar y potencialmente más fácil de leer para un nuevo desarrollador, ya que pueden ver el componente SwiftUI predeterminado subyacente.
Ver extensiones
Es posible que haya notado que los modificadores de vista no eran tan agradables de leer como la mayoría de las cosas en SwiftUI. Resulta que la mayoría de los modificadores de vista en SwiftUI no son en realidad modificadores de vista, son extensiones.
Estas extensiones funcionan exactamente como esperarías que funcionara una extensión Swift.
// Container View struct SomeView: View { var body: some View { VStack { Text("Welcome to our SwiftUI app") .companyStyled() FeaturedContentView() ArticlesScrollView() FooterView() } } } // Extension extension Text { func companyStyled() -> some View { self .font(.custom("Montserrat-Bold", size: 16)) .foregroundColor(.textBlack) .padding() } }
Esto se siente exactamente como la forma predeterminada de personalizar las vistas, reemplazando las tres extensiones integradas que usamos en nuestra vista original con solo una que escribimos nosotros mismos.
La mejor manera
El enfoque que adopte con su base de código depende completamente de usted, pero tiendo a encontrar que cualquier vista completamente personalizada tiene sentido como su propia vista. Todo lo que sea simplemente personalizar algo que ya existe debería vivir como una extensión.
Gracias por leer
Añadir comentario