有條件地在視圖 SwiftUI 內包裝代碼

Question

我想在基於 boolean 的滾動視圖中制作我的代碼

像這樣的東西：

 ScrollView{
    
          Vstack {
                
         }
         
           Hstack {
           
            }
    
    }.isWrapped(true)

因此，如果 bool 為真，則內容將包裝在 ScrollView 中，如果不是，我將按原樣獲取內容。 （沒有 scrollView 父級）

我嘗試了多種方式，我看到的唯一可能是 2 塊代碼，不是很好的實踐思想。

Answer 1

由於 SwiftUI 的性質，您無法在不移除子項的情況下移除父項。 正如您在編輯中提到的，這將需要兩個代碼塊。 但是，您可以通過兩種不同的方式使其更加友好。

---

第一種方式是可重用組件。 它需要一個 Binding isVisible變量和內容。

struct ConditionalScrollView<Content: View>: View {
    @Binding private var isVisible: Bool
    private var builtContent: Content

    init(isVisible: Binding<Bool>, content: () -> Content) {
        self._isVisible = isVisible
        builtContent = content()
    }

    var body: some View {
        if isVisible {
            ScrollView { builtContent }
        } else {
            builtContent
        }
    }
}

使用這個新組件，就是簡單的在想要手動調整的區域替換使用ScrollView 。 IE：

struct ContentView: View {
    @State var isVisible = true

    var body: some View {
        ConditionalScrollView(isVisible: $isVisible) {
            Text("Hello, world!")
                .padding()
        }
    }
}

但這不是您唯一的選擇。

---

如果您想讓事情盡可能簡單，您可以使用簡單的ViewBuilder來實現。 在ViewBuilder中創建您不想更改的視圖，然后在ScrollView周圍創建一個條件，同時將變量作為內容。 它看起來如下：

struct ContentView: View {
    @State private var isVisible = true

    @ViewBuilder private var mainContent: some View {
        Text("Hello, world!")
            .padding()
    }

    var body: some View {
        if isVisible {
            ScrollView { mainContent }
        } else {
            mainContent
        }
    }
}

您可能已經意識到，這是 SwiftUI 的限制之一。 但這可以被認為是一種優勢，因為您將始終知道視圖的父級是否存在。

我希望這個小花絮有所幫助，快樂的編碼！

Answer 2

您還可以使它更容易：

@State var isWraped : bool = true

var body: some View {
   if isWrapped {
     ScrollView {
          YourView()
     }
       else {
          YourView()
     }

Answer 3

一種方法是始終使用ScrollView ，但告訴它不要滾動。 如果您將空集作為第一個參數傳遞給ScrollView ，它將不會滾動。

ScrollView(shouldScroll ? .vertical : []) {
    // content here
}

另一種方法是在您建議的isWrapped修飾符中從ScrollView中提取內容，如下所示：

extension ScrollView {
    @ViewBuilder
    func isWrapped(_ flag: Bool) -> some View {
        if flag { self }
        else { self.content }
    }
}