SwiftUI 如何在sheet上添加灰线条

Question

I know how to add this element with HStack and rectangle. But...

1) How is it called?

2) Does SwiftUI has this element in the box?

Answer 1

I don't think there's one accepted name for it; I usually call it a drag handle as it's there to indicate a draggable area to users.

There is no built-in syntax to add one to a sheet. That's the benefit of SwiftUI – simple controls are easy to implement and customize.

For completeness, you can make one using something like the following:

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

    // your sheet content here

    Spacer()
}

Answer 2

iOS16:

It is added automatically if you have more than one detent, so for just one detent you will have to be explicit about the visibility:

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

Answer 3

To add to John M.'s wonderful answer, you can use a ZStack to place the Capsule on top of the NavigationView . Like this:

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

I experimented with the size and found width: 35, height: 5 produces a shape that is closed to the image.

Answer 4

As a small addition to the great answers of John M. and happymacaron, this comes even closer:

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

Answer 5

Update for IOS 16 / Xcode 14

Expanding on these great answers. I have several sheets that can be presented by an ActiveSheet enum and wanted to embed a top/drag bar once for all sheets. I'm also using IOS16's new 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])
    }