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

相关文章
|
XML Android开发 数据格式
Android中利用shape属性自定义设置Button按钮
Android中利用shape属性自定义设置Button按钮
319 0
|
图形学
[√]qdockerwidget自定义titlebar遇到的各种问题
[√]qdockerwidget自定义titlebar遇到的各种问题
147 0
|
JSON 数据格式
easyUI 的combobox如何获取除valueField和textField外的三个值
easyUI 的combobox如何获取除valueField和textField外的三个值
|
Android开发
Android 使用DataBinding时 将布局页面转换为数据绑定布局(Convert to data binding layout) 不出现提示解决办法
Android 使用DataBinding时 将布局页面转换为数据绑定布局(Convert to data binding layout) 不出现提示解决办法
192 0
|
Swift 容器
SwiftUI 中自定义 container
自定义容器是在 Swift UI 中实现复杂布局和视图组合的强大工具。通过自定义容器,我们可以将一组视图组织在一起,以创建可重用的 UI 元素,同时保持一致的外观和行为。在本文中,我们将探讨如何使用自定义容器来实现一个主题,并深入了解其设计和实现细节。
当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文件中
2289 0
当Android的Kotlin出现了Unresolved reference:***(设置的控件id)
|
开发者 iOS开发
SwiftUI—创建第一个SwiftUI项目
SwiftUI—创建第一个SwiftUI项目
936 0
SwiftUI—创建第一个SwiftUI项目
|
前端开发
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—使用ViewModifier视图修饰符集成多个样式
390 0
SwiftUI—使用ViewModifier视图修饰符集成多个样式
SwiftUI—Text视图的填充属性
SwiftUI—Text视图的填充属性
373 0
SwiftUI—Text视图的填充属性