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 不仅可以用于外观样式,还可以用于添加特定的行为和功能。这种模块化的方法可以帮助我们更有效地管理和维护应用程序的视图层级结构。

相关文章
SwiftUI—使用section将列表分为几个组
SwiftUI—使用section将列表分为几个组
818 0
SwiftUI—使用section将列表分为几个组
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
100 0
|
程序员 iOS开发 开发者
iOS开发:报错‘Unknown class ViewController in Interface Builder file’解决方法
在iOS开发过程中,会遇到一些比较常见的错误,尤其是刚入门的初级开发者,如果不熟练的话就会出错,本篇博文就来分享一个常见的问题,即报错‘Unknown class ViewController in Interface Builder file’的解决方法。
473 1
iOS开发:报错‘Unknown class ViewController in Interface Builder file’解决方法
|
Swift 容器
SwiftUI 中自定义 container
自定义容器是在 Swift UI 中实现复杂布局和视图组合的强大工具。通过自定义容器,我们可以将一组视图组织在一起,以创建可重用的 UI 元素,同时保持一致的外观和行为。在本文中,我们将探讨如何使用自定义容器来实现一个主题,并深入了解其设计和实现细节。
|
Android开发
Android Studio的怪错:AndroidManifest.xml unresolve symbol package/connot resolve symbol/Animations
Android Studio的怪错:AndroidManifest.xml unresolve symbol package/connot resolve symbol/Animations
78 0
Android Studio的怪错:AndroidManifest.xml unresolve symbol package/connot resolve symbol/Animations
|
Java 数据处理 开发者
Preference组件探究之自定义Preference
Preference组件探究之自定义Preference
Preference组件探究之自定义Preference
SwiftUI极简教程10:State状态和Binding绑定的使用
SwiftUI极简教程10:State状态和Binding绑定的使用
1030 0
SwiftUI极简教程10:State状态和Binding绑定的使用
当Android的Kotlin出现了Unresolved reference:***(设置的控件id)
这几天学习Kotlin,在看郭霖老师的《第一行代码》第三版这本书,这里一段程序,同样得样例,自己敲会报错(入图),很疑惑,自己手动解决了。 这里出现了Unresolved reference: recyclerView,我前面activity_main.xml设置了一个id 解决这问题,要在MainActivity加入包 import kotlinx.android.synthetic.main.activity_main.* 如果kotlinx 报红了,要在app的build.gradle文件中
2155 0
当Android的Kotlin出现了Unresolved reference:***(设置的控件id)
|
开发者 iOS开发
SwiftUI—创建第一个SwiftUI项目
SwiftUI—创建第一个SwiftUI项目
879 0
SwiftUI—创建第一个SwiftUI项目
|
前端开发
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—使用ViewModifier视图修饰符集成多个样式
372 0
SwiftUI—使用ViewModifier视图修饰符集成多个样式