按下按鈕后顯示底頁 swiftui

Question

我正在嘗試將響應高度添加到我的應用程序底部表中，我可以以編程方式設置該高度。 為此，我正在嘗試使用此視頻。 這是我的視圖控制器的代碼：

struct SecondView: View {
    @State var cardShown = false
    @State var cardDismissal = false
    
    var body: some View {
        Button {
            cardShown.toggle()
            cardDismissal.toggle()
        } label: {
            Text("Show card")
                .bold()
                .foregroundColor(Color.white)
                .background(Color.red)
                .frame(width: 200, height: 50)
        }
        
        BottomCard(cardShown: $cardShown, cardDismissal: $cardDismissal) {
            CardContent()
        }
    }
}

struct CardContent:View{
    var body: some View{
        Text("some text")
    }
}

struct BottomCard<Content:View>:View{
    @Binding var cardShown:Bool
    @Binding var cardDismissal:Bool
    let content:Content
    
    init(cardShown:Binding<Bool> , cardDismissal:Binding<Bool>, @ViewBuilder content: () -> Content){
        _cardShown = cardShown
        _cardDismissal = cardDismissal
        self.content = content()
    }
    
    var body: some View{
        ZStack{
            //Dimmed
            GeometryReader{ _ in
                EmptyView()
            }
            .background(Color.red.opacity(0.2))
            .opacity(cardShown ? 1 : 0)
            .animation(.easeIn)
            .onTapGesture {
                cardShown.toggle()
            }
            
            // Card
            VStack{
                Spacer()
                
                VStack{
                    content
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

但按下按鈕后，我看不到任何按下的底部菜單。 我檢查了一下，似乎我有與該視頻類似的代碼，但在視頻底部出現。 也許我錯過了一些重要的菜單顯示。 主要目的是顯示具有響應高度的底部菜單，它將包裹元素並能夠更改菜單高度。 我嘗試使用.sheet()但正如我所見，這個元素具有穩定的高度。 我知道從 ios 15+ 開始，我們將為這個問題提供一些解決方案，但我想創造一些更穩定和方便的東西:)

Answer 1

iOS 16

我們可以擁有原生 SwiftUI 可調整大小的表格（如 UIKit）。 這可以通過新的.presentationDetents()修飾符實現。

.sheet(isPresented: $showBudget) {
    BudgetView()
        .presentationDetents([.height(250), .medium])
        .presentationDragIndicator(.visible)
}

演示：

Answer 2

這是我在運行您的代碼時得到的	我在對底卡進行了一些調整后得到了這個

struct BottomCard<Content:View>:View{
    @Binding var cardShown:Bool
    @Binding var cardDismissal:Bool
    let content:Content

    init(cardShown:Binding<Bool> , cardDismissal:Binding<Bool>, @ViewBuilder content: () -> Content){
        _cardShown = cardShown
        _cardDismissal = cardDismissal
        self.content = content()
    }

    var body: some View{
        ZStack{
            //Dimmed
            GeometryReader{ _ in
                EmptyView()
            }
            .background(Color.red.opacity(0.2))
            .animation(.easeIn)
            .onTapGesture {
                cardShown.toggle()
            }

            // Card
            VStack{
                Spacer()

                VStack{
                    content
                }
                Spacer()
            }
        }.edgesIgnoringSafeArea(.all)
        .opacity(cardShown ? 1 : 0)
    }
}

所以你只需要設置高度！

Answer 3

您要做的是擁有一張只有在滿足某個標准時才存在的卡。 如果你想從底部向上推一張卡片，那么你可以制作一張卡片的視圖，並使用幾何閱讀器將它放在 Zstack 視圖的底部，然后制作一個按鈕，只允許該卡片在按鈕時存在被按下而不是試圖通過改變其不透明度來雇用它。 另外，請確保將解雇按鈕移動到您擁有的 cad 內部。

這是您可以嘗試的示例：

struct SecondView: View {
    @State var cardShown = false

     var body: some View {
      GeometryReader{
              ZStack {
                ZStack{
       // I would also suggest getting used to physically making your 
       //button and then giving them functionality using a "Gesture"
                 Text("Show Button")
                  .background(Rectangle())
                  .onTapGesture{
                 let animation = Animation.spring()
                   withAnimation(animation){
                     self.cardShown.toggle
                   }
                 }
               }
                ZStack {
                 if cardShown == true{
                   BottomCard(cardShown: $cardShown) {
                      CardContent()
                  }
               }
              // here you can change how far up the card comes after the button 
               //is pushed by changing the "0"
                .offset(cardShown == false ? geometry.size.height : 0)
               }
             }
           }
         }
       }

此外，您不需要為正在顯示的卡片設置一個變量，也不需要為正在關閉的卡片設置一個變量。 只需有一個“cardShown”變量並使其成為 TRUE 時顯示卡片，而當它為 FALSE 時（在按下卡片上的按鈕或再次按下初始按鈕后）卡片消失。

Answer 4

iOS 16.0+

iPadOS 16.0+

macOS 13.0+

Mac 催化劑 16.0+

tvOS 16.0+

watchOS 9.0+

---

使用presentationDetents(_:)

struct ContentView: View {
    @State private var isBottomSheetVisible = false


    var body: some View {
        Button("View Settings") {
            isBottomSheetVisible = true
        }
        .sheet(isPresented: $isBottomSheetVisible) {
            Text("Bottom Sheet")
                .presentationDetents([.height(250), .medium])
                .presentationDragIndicator(.visible)
        }
    }
}