SwiftUI如何在sheet上添加灰色线条栏

Question

我知道如何使用HStack和rectangle添加这个元素。但是...

1）这个元素叫什么？

2）SwiftUI中是否有这个元素？

- Tim

---

相关：https://dev59.com/jKb1oIgBc1ULPQZFqbYP - pkamb

Answer 1

iOS16：

如果您有多个定位器，则会自动添加它，因此对于仅一个定位器，您需要明确指定其可见性：

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

- Hans Terje Bakke

Answer 2

1. 这个东西叫做拖动指示器。
2. 在iOS 16+版本中，您可以使用.presentationDragIndicator(_:)修饰符来控制其可见性。

关于如何在早期的iOS版本中模拟这个拖动指示器已经提出了一些建议。

作为对John M.和happymacaron的精彩答案的小补充，这个方法更接近实现：

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

- soundflix

Answer 3

我认为并没有一个被广泛接受的名称；通常我称其为拖动手柄，因为它是为了告诉用户可拖动区域而存在的。

在表格中没有内置语法来添加这个控件。这就是 SwiftUI 的好处 - 简单的控件易于实现和定制。

为了完整起见，您可以使用以下方法之一来创建一个：

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

    // your sheet content here

    Spacer()
}

- John M.

---

当我在其下放置NavigationView时，它看起来与图像不同。 - juliushuck

当在.sheet模态中使用时，如何使拖动栏后面的背景透明？ - AndiAna

Answer 4

除了John M.的精彩回答之外，您还可以使用ZStack将Capsule放置在NavigationView的顶部，像这样：

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

我尝试了不同的大小，发现width: 35, height: 5可以产生接近图片的形状。

- happymacaron

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

- DIV