SwiftUI 中自定义 modifier

简介: 在 Swift UI 中,自定义 Modifier 是一种强大的方式,可以让你轻松地封装和重用视图的样式和行为。在本文中,我们将探讨如何使用自定义 Modifier ,以便在应用程序中保持一致的外观和风格。

SwiftUI 中自定义 modifier

在 Swift UI 中,自定义 Modifier 是一种强大的方式,可以让你轻松地封装和重用视图的样式和行为。在本文中,我们将探讨如何使用自定义 Modifier ,以便在应用程序中保持一致的外观和风格。

import SwiftUI

// 自定义 modifier

struct Tittle: ViewModifier {
    
   func body(content: Content) -> some View {
    
       content
           .font(.largeTitle)
           .foregroundColor(Color.white)
           .padding()
           .background(Color.blue)
           .clipShape(RoundedRectangle(cornerRadius: 10))
   }
}

extension View {
    
   func tittleStyle() -> some View {
    
       modifier(Tittle());
   }

   func waterMark(with text: String) -> some View {
    
       modifier(WaterMark(text: text))
   }
}

struct WaterMark : ViewModifier {
    
   var text : String;
   func body(content : Content) -> some View {
    
       ZStack(alignment: .bottomTrailing){
    
           content
           Text(text)
               .foregroundColor(Color.gray)
               .padding()
               .background(Color.black)

       }
   }
}



struct ModifierUIView: View {
    
   var body: some View {
    
//        Text("Hello, World!")
//            .tittleStyle();
       Color.blue
           .frame(width: 300, height: 300)
           .waterMark(with: "starzyn")
   }
}

struct ModifierUIView_Previews: PreviewProvider {
    
   static var previews: some View {
    
       ModifierUIView()
   }
}

在上面的代码中,我们首先创建了一个名为 TittleWatermark 的自定义 Modifier。

Tittle实现的功能就是可以把一个 Text 组件变成标题

WarterMark 实现的功能就是在组件的右下角加上一个水印

然后,我们通过在 View 的扩展中添加 tittleStylewaterMark 方法来应用这个修改器。

最后,我们在 ModifierUIView 中直接使用就可以了

通过创建和使用自定义 Modifier,我们可以在 Swift UI 中轻松地实现主题功能,以确保应用程序中的视图保持一致的外观和风格。自定义 Modifier 不仅可以用于外观样式,还可以用于添加特定的行为和功能。这种模块化的方法可以帮助我们更有效地管理和维护应用程序的视图层级结构。

相关文章
|
2天前
|
Java API iOS开发
swiftUI声明式语法
swiftUI声明式语法
42 1
SwiftUI—使用Text视图创建漂亮的富文本
SwiftUI—使用Text视图创建漂亮的富文本
1024 0
SwiftUI—使用Text视图创建漂亮的富文本
|
9月前
|
Swift 容器
SwiftUI 中自定义 container
自定义容器是在 Swift UI 中实现复杂布局和视图组合的强大工具。通过自定义容器,我们可以将一组视图组织在一起,以创建可重用的 UI 元素,同时保持一致的外观和行为。在本文中,我们将探讨如何使用自定义容器来实现一个主题,并深入了解其设计和实现细节。
|
9月前
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
97 0
Winform控件优化之继承Control重写实现Layer遮罩层
通过继承Control控件类,进行重写,实现Layer效果的遮罩层,具体使用可直接看后面的介绍。主要功能如下:1. 遮罩层的透明度Alpha,默认125。255表示不透明。2. 设置遮罩层中心的图片
486 0
Winform控件优化之继承Control重写实现Layer遮罩层
|
Java iOS开发 MacOS
高级 SwiftUI 动画 — Part 3:AnimatableModifier
之前的两篇文章animating paths 和 transform matrices 对 Animatable 协议使用做了介绍,今天这篇文章将为大家介绍 AnimatableModifier,使用它可以完成更多的动画工作。
114 0
高级 SwiftUI 动画 — Part 2:GeometryEffect
在本系列的第一部分,我介绍了Animatable协议,以及我们如何使用它来为路径制作动画。接下来,我们将使用一个新的工具: GeometryEffect,用同样的协议对变换矩阵进行动画处理。如果你没有读过第一部分,也不知道Animatable协议是什么,你应该先读一下。或者如果你只是对GeometryEffect感兴趣,不关心动画,你可以跳过第一部分,继续阅读本文。
125 0
|
前端开发
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—使用ViewModifier视图修饰符集成多个样式
339 0
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—Text视图的填充属性
SwiftUI—Text视图的填充属性
290 0
SwiftUI—Text视图的填充属性
|
Kotlin
【错误记录】布局组件加载错误 ( Attempt to invoke virtual method ‘xxx$Callback android.view.Window.getCallback()‘ )
【错误记录】布局组件加载错误 ( Attempt to invoke virtual method ‘xxx$Callback android.view.Window.getCallback()‘ )
281 0

热门文章

最新文章