SwiftUI 如何在sheet上添加灰線條

Question

我知道如何使用 HStack 和矩形添加此元素。 但...

1）它怎么稱呼？

2) SwiftUI 盒子里有這個元素嗎？

Answer 1

我認為它沒有一個公認的名稱。 我通常稱它為拖動手柄，因為它在那里向用戶指示可拖動區域。

沒有將一個添加到工作表的內置語法。 這就是 SwiftUI 的優勢——簡單的控制易於實施和定制。

為了完整起見，您可以使用以下內容制作一個：

VStack {
    Capsule()
        .fill(Color.secondary)
        .frame(width: 30, height: 3)
        .padding(10)

    // your sheet content here

    Spacer()
}

Answer 2

iOS16：

如果您有多個定位器，它會自動添加，因此對於一個定位器，您必須明確說明可見性：

yourContentView
    .presentationDetents([.medium])
    .presentationDragIndicator(.visible)

Answer 3

要添加到 John M. 的精彩答案，您可以使用ZStack將 Capsule 放在NavigationView的頂部。 像這樣：

ZStack(alignment: .top) {
    // NavigationView
    Capsule()
        .fill(Color.secondary)
        .frame(width: 35, height: 5)
}

我嘗試了大小，發現width: 35, height: 5會產生一個接近圖像的形狀。

Answer 4

作為對 John M. 和 happymacaron 的精彩答案的一個小補充，這更接近：

ZStack(alignment: .top) {
    // NavigationView
    Capsule()
        .fill(Color.secondary)
        .opacity(0.5)
        .frame(width: 35, height: 5)
        .padding(6)
}

Answer 5

更新 IOS 16 / Xcode 14

擴展這些偉大的答案。 我有幾張可以由 ActiveSheet 枚舉呈現的工作表，並且想為所有工作表嵌入一次頂部/拖動條。 我也在使用 IOS16 的新 presentationDetents

   @ViewBuilder
    private func sheetView(with item: ActiveSheet) -> some View {
        VStack {
            Capsule()
                .fill(Color.secondary)
                .frame(width: 45, height: 5)
                .padding()
            
            switch item {
            case .addItem:
                AddItemView(activeSheet: $activeSheet, list: $selectedList) // bind a list here
            case .addList:
                AddListView(activeSheet: $activeSheet)
            case .showParticipants (let participants, let list):
                ParticipantView(listOfParticipants: participants, list: list)
            default:
                EmptyView()
            }
            Spacer()
        }.presentationDetents([.medium, .large])
    }