¿Tienes que escribir un montón de código de estilo cada vez? Pruebe ViewModifier para crear una especificación de estilo unificado

¡Trabajar juntos para crear y crecer juntos! Este es el día 30 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de agosto", haga clic para ver los detalles del evento .

Antecedentes del proyecto

Un día UIcorrió y señaló y App页面dijo:

Miras dos botones idénticos, ¿por qué el segmento de línea de este botón es diferente del segmento de línea del segundo botón?

Después de revisar el código, vi que cuando copié el código de estilo, copié una línea menos, lo cual es un poco vergonzoso.

Después de este incidente, eché 假装反思un vistazo ¿Debería ser lo UI设计mismo, 统一的样式debería haber una biblioteca de estilos unificada en el sistema, para que no haya necesidad de copiar tantos códigos de estilo cada vez?

Solo hazlo.

Proyecto de construcción

Primero, crea un nuevo SwiftUIproyecto llamado SwiftUIStyleSheet.

estilo básico

Primero echemos un vistazo a cómo se diseña el estilo básico, hagamos un 文字按钮ejemplo simple:

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(Capsule())
    }
}
复制代码

En el código anterior, podemos ver modificadores comunes para los botones de texto: fontmodificador de foregroundColorfuente, modificador de color de fuente, modificador de paddingmargen, modificador de backgroundcolor de fondo, modificador de clipShapedibujo de forma.

ver decorador

Si Apptodos los botones principales de este estilo usan este estilo, podemos extraer la parte del modificador y crear un ViewModifiermodificador de vista. La estructura del código es la siguiente:

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
           //修饰符
    }
}
复制代码

En el código anterior, extraemos el Textmodificador original para el botón de texto y lo construimos en un nuevo modificador de vista MainTitle, nuestro modificador de botón de texto se modificará content, por ejemplo:

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(Capsule())
    }
}
复制代码

Cuando queramos usar, solo necesitamos llamar modifieral modificador, ejemplo:

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .modifier(MainTitle())
    }
}
复制代码

Si queremos ser más elegantes y queremos llamar al modificador de vista como un modificador, ViewModifiertambién podemos hacer algo 拓展, por ejemplo:

extension View {
    func mainTitle() -> some View {
        self.modifier(MainTitle())
    }
}
复制代码

De esta manera, cuando Textagregamos modificadores, podemos usar la mainTitlevista directamente, por ejemplo:

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .mainTitle()
    }
}
复制代码

Rol modificador

Tal vez un botón no pueda ver el efecto, creemos un botón más para ver:

struct ContentView: View {
    var body: some View {
        VStack(spacing:15){
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
        }
    }
}
复制代码

Cuando diferentes páginas de nuestra aplicación usan el mismo estilo de botón, si queremos modificar el estilo uniformemente, solo necesitamos modificar el ViewModifierdecorador de vista, por ejemplo:

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(maxWidth:.infinity)
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
            .cornerRadius(8)
            .padding(.horizontal)
    }
}
复制代码

¡Felicitaciones, ha completado todo el contenido de este capítulo!

Ven y pruébalo.

Si esta columna es útil para usted, haga clic en Me gusta, comente y siga ~