SwiftUI 条件 .frame 视图修饰符

Posted 2023-02-24

【中文标题】SwiftUI 条件 .frame 视图修饰符

【英文标题】：SwiftUI Conditional .frame View Modifier

【发布时间】：2021-04-01 18:53:53

【问题描述】：

我的代码如下：

Rectangle()
    .fill(Color.red)
    .frame(width: 60, height: 60, alignment: .center)
    .cornerRadius(recording ? 5 : 30)

所以我想知道.frame 是否可以像.cornerRadius 一样是有条件的。我这样做是为了变形形状，但是当它变形时我还需要使它变小。一个例子是语音备忘录应用的录音按钮。

【参考方案1】：

是的，您也可以将三元条件语句与 .frame 一起使用。

例子：

.frame(width: recording ? 40 : 60, height: recording ? 40 : 60, alignment: .center)

【讨论】：

谢谢，显然我在这样做时的错误是没有使用 self.recording

【参考方案2】：

如果您说的是完全不使用帧修饰符（或提供一种干净的方式来处理不同的帧），ViewModifier 可能是一个不错的选择：

struct ContentView: View 
    @State private var recording = false
    
    var body: some View 
        Rectangle()
            .fill(Color.red)
            .modifier(CustomFrameModifier(active: recording))
            .cornerRadius(recording ? 5 : 30)
    


struct CustomFrameModifier : ViewModifier 
    var active : Bool
    
    @ViewBuilder func body(content: Content) -> some View 
        if active 
            content.frame(width: 60, height: 60, alignment: .center)
         else 
            content
        
    

【讨论】：

哦，好吧。这实际上清洁了很多。非常感谢！

这样一个聪明而有创意的解决方案！我认为这是最好的方法，因为它也为您提供了没有维度可以通过的灵活性。可以轻松扩展以获取三元表达式的参数，因此它本质上可以具有以下三种状态之一：值 a、b 和 nil。

【参考方案3】：

我假设你想要这样的东西

        Rectangle()
            .fill(Color.red)
            .frame(width: recording ? 45 : 60, height: recording ? 30 : 60, alignment: .center)
            .cornerRadius(recording ? 5 : 30)
            .onTapGesture 
                recording.toggle()
            
            .animation(.default, value: recording)

【参考方案4】：

您可以使用?

---

import SwiftUI

struct ContentView: View 
    
    @State private var recording: Bool = Bool()
    @State private var color: Color = Color.blue
    
    var body: some View 
        
        ZStack 
            
            Circle()
                .fill(Color.white)
                .frame(width: 60.0, height: 60.0, alignment: .center)
                .shadow(radius: 10.0)
            
            Circle()
                .fill(color)
                .frame(width: recording ? 30.0 : 60.0, height: recording ? 30.0 : 60.0, alignment: .center)  // <<: Here!

 
        
        .onTapGesture  recording.toggle() 
        .animation(.easeInOut, value: recording)
        .onChange(of: recording)  newValue in if newValue  colorFunction()  else  color = Color.blue  

    
    
    
    func colorFunction() 

        if (color != Color.red)  color = Color.red  else  color = Color.clear 
        
        DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(1))  if recording  colorFunction()