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])
    }