SwiftUI:如果满足条件,如何为文本添加边框?

Posted

技术标签:

【中文标题】SwiftUI:如果满足条件,如何为文本添加边框?【英文标题】:SwiftUI: How to add a border to text in if conditions are met? 【发布时间】:2021-03-27 23:14:07 【问题描述】:

我知道我可以使用类似的东西:

Text("Hello World")
 .overlay(
   RoundedRectangle(cornerRadius: 10)
      .stroke(Color.black, lineWidth:1)
)

在文本视图周围添加边框,但是如何根据真/假值添加它?假设我想要一个按钮,当按下时会在文本周围添加边框,我怎样才能实现覆盖仅在 var 为真时才出现?

【问题讨论】:

【参考方案1】:

这项工作最更容易正确的方法在这里:

如果用于显示 Border 的变量为 true,它将起作用,否则它将应用 nothing!



import SwiftUI

struct ContentView: View 
    
    @State private var addBorder: Bool = false
    
    var body: some View 
        
        Text("Hello, world!")
            .padding()
            .overlay(addBorder ? RoundedRectangle(cornerRadius: 10).stroke(Color.black, lineWidth:1) : nil)
        
        Button("add Border")  addBorder.toggle() 
            .padding()
        
    

【讨论】:

非常感谢您的帮助!做到了,这正是我想要的!【参考方案2】:

一个简单的方法是这样的:

@State var wantBorder = false
...
Text("Hello World")
 .overlay(
  RoundedRectangle(cornerRadius: 10)
  .stroke(wantBorder ? Color.black : Color.clear, lineWidth:1)
)

【讨论】:

【参考方案3】:

如果您谈论的是按钮事件,您可能希望使用自定义 ButtonStyle 以便您可以对新闻状态做出反应:

struct ContentView: View 
    var body: some View 
        Button(action: ) 
            Text("Hello World")
        
        .buttonStyle(CustomButtonStyle())
    


struct CustomButtonStyle : ButtonStyle 
    
    @ViewBuilder func makeBody(configuration: Configuration) -> some View 
        if configuration.isPressed 
            configuration.label
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.black, lineWidth:1)
               )
         else 
            configuration.label
        
    
    

在非按钮情况下,您可以使用三元表达式并在条件不成立时提供 nil:

struct ContentView: View 
    @State var showOverlay = false
    
    var body: some View 
        Button(action:  showOverlay.toggle() ) 
            Text("Hello World")
                .overlay(
                    showOverlay ?
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.black, lineWidth:1)
                    : nil)
        
    

最后,一种相对简洁的方法是使用视图修饰符:

struct ContentView: View 
    @State var showOverlay = false
    
    var body: some View 
        VStack(spacing: 10) 
            Button("Toogle") 
                showOverlay.toggle()
            
            Text("Hello World").modifier(OverlayModifier(showOverlay: showOverlay))
        
    


struct OverlayModifier : ViewModifier 
    var showOverlay : Bool
    
    @ViewBuilder func body(content: Content) -> some View 
        if showOverlay 
            content
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.black, lineWidth:1)
               )
         else 
            content
        
    

【讨论】:

以上是关于SwiftUI:如果满足条件,如何为文本添加边框?的主要内容,如果未能解决你的问题,请参考以下文章

如何为 UIPickerView 添加边框?

如何为 Swift UI 的字符添加最大长度

如何为 Flutter 中的文本赋予边框/背景?

Angular UI-Select:如何为文本溢出添加工具提示?

如何为表单框添加边框?

如何为 UITabBar 徽章添加边框?