SwiftUI 条件 .frame 视图修饰符答案

【问题标题】：SwiftUI Conditional .frame View ModifierSwiftUI 条件 .frame 视图修饰符
【发布时间】：2021-04-01 18:53:53
【问题描述】：

我的代码如下：

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

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

【问题讨论】：

标签： swift view swiftui conditional-statements modifier

【解决方案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() } }
        
    }
    
}

【讨论】：