Ищу помощь с реализацией компактного пользовательского интерфейса ящика в SwiftUI ⇐ IOS

[Anonymous]

Прошу прощения, если в прошлый раз моему вопросу не хватило ясности или подробностей. Я пытаюсь воспроизвести определенный пользовательский интерфейс, как показано на прикрепленных изображениях, где снизу появляется небольшой ящик. Мы успешно реализовали это в UIKit, но столкнулись с проблемами в SwiftUI. Наш текущий подход предполагает использование .sheet со средними и большими фиксаторами, но мы не нашли способа создать меньший фиксатор, как в нашем проекте.

Мы также изучали возможность использования UIViewControllerRepresentable для интеграции представления UIKit в SwiftUI, но этот подход не увенчался успехом. В частности, мы столкнулись с проблемой с представлением под названием «Контроллер хостинга презентаций», которое постоянно отображает белый экран. Единственный найденный нами обходной путь – использование FullScreenCover, что не соответствует нашим целям дизайна.

Обновить

Я добавляю код SwiftUI о том, как конвертировать это представление UIKit в представление SwiftUI и какой код представления UIKit. Также я добавил фотографии того, что происходит.

Может ли кто-нибудь дать рекомендации о том, как лучше всего добиться эффекта небольшого ящика в SwiftUI? Ваш опыт и предложения будут очень признательны. Если вам нужна дополнительная информация, дайте мне знать.

Лист

Когда я конвертирую его и показываю представление на листе, оно выглядит вот так, и это иерархия представлений

Как это выглядит на листе

Просмотр иерархии

fullScreenCover

Вот как это выглядит с помощью FullScreenCover, проблема в том, что черный экран, за которым, как предполагается, A, делает задний пользовательский интерфейс неприкосновенным, а B выглядит немного мусорно. Происходит то, что он скользит вверх по представлению с маленьким листом, и как только вы снова коснетесь представления, оно исчезнет.

Извините за пометки, но вот как это выглядит при использовании FullScreenCover

Это иерарх полноэкранного покрытия

Представление UIkit – как это должно выглядеть

Этот ящик, о котором я говорю, был сделан в UIKit

В UIkit вы видите, что при вызове листа действий он не является черным или сэндвичем с таким количеством просмотров между ними
импортировать SwiftUI struct EngagementPaymentView: Посмотреть { @Environment(\.presentationMode) varpresentationMode: Binding @ObservedObject var viewModel: EngagementViewModel var closeWithoutSavingAction: () -> Void @SwiftUI.State var isActionSheetSelected: Bool = false var body: some View { НавигацияВью { ZStack { ВСтек { ПрокруткаView { VStack(выравнивание: .leading, интервал: 32) { VStack(выравнивание: .leading, интервал: 16) { PaymentMethodsView (viewModel: viewModel) } .padding(0) .frame(maxWidth: .infinity, выравнивание: .topLeading) } .padding(16) .frame(maxWidth: .infinity, выравнивание: .topLeading) .фон(.белый) } .safeAreaInset(edge: .bottom, интервал: 0) { Разделитель() .frame(высота: 150) } .background(Цвет(Color.graySmoke.color)) HStack(выравнивание: .center, интервал: 16) { HStack(выравнивание: .center, интервал: 8) { Кнопка { self.presentationMode.wrappedValue.dismiss() } этикетка: { EngagementButton(buttonTitle: «Назад», textColor: Color.blackPearl.color, buttonColor: Color.white.color, showOverlay: true, isLoading: .constant(false)) } Навигационная ссылка { EngagementEsignView (viewModel: viewModel, closeWithoutSavingAction: closeWithoutSavingAction) } этикетка: { EngagementButton(buttonTitle: «Далее», textColor: Color.white.color, buttonColor: Color.primary.color, isDisabled: true, showOverlay: false, isLoading: .constant(false)) } } .padding(16) .frame(ширина: 360, выравнивание: .leading) .background(Цвет(Цвет.белый.цвет)) } } }.sheet(isPresented: $isActionSheetSelected) { ActionSheetSwiftUIView(действия: [ActionItem(buttonStyle: .button(стиль: .primary, заголовок: "ABC"))]) .ignoresSafeArea() .background(ПрозрачныйBackground()) .frame(maxHeight: .infinity) } } .navigationBarHidden(истина) .onAppear { DispatchQueue.main.asyncAfter(deadline: .now() + 2, выполнить: { isActionSheetSelected = правда }) } } } структура ActionSheetSwiftUIView: UIViewControllerRepresentable { typealias UIViewControllerType = ActionSheetController вар действия = [ActionItem]() func makeUIViewController (контекст: Контекст) -> ActionSheetController { пусть vc = ActionSheetController() // vc.view.backgroundColor = .clear // vc.sheetView.backgroundView.backgroundColor = .clear // vc.sheetView.backgroundColor = .clear // vc.view.backgroundColor = .clear за действие в действиях { vc.addAction(действие) vc.addSeparatorView() } вернуть ВК } func updateUIViewController (_ uiViewController: ActionSheetController, context: Context) { } } структура TransparentBackground: UIViewRepresentable { функция makeUIView (контекст: Контекст) -> UIView { пусть просмотр = UIView() DispatchQueue.main.async { view.superview?.superview?.backgroundColor = .clear view.superview?.superview?.superview?.backgroundColor = .clear } обратный вид } func updateUIView(_ uiView: UIView, context: Context) {} } импортировать UIKit класс ActionSheetView: UIView { пусть фонПросмотр = UIView() пусть cardView = UIView() пусть прокрутка = UIScrollView() пусть stackView = UIStackView() переопределить init(frame: CGRect) { super.init(кадр:кадр) настройкаSubviews() } требуется инициализация?(кодер aDecoder: NSCoder) { super.init(кодер: aDecoder) настройкаSubviews() } переопределить функцию LayoutSubviews() { // Обновляем привязку высоты, чтобы она смещалась для нижнего безопасного набора. cardView.snp.updateConstraints { (сделать) в make.height.equalTo(stackView.snp.height).offset(safeAreaInsets.bottom).priority(.low) } супер.layoutSubviews() } } расширение ActionSheetView: Просмотр { функция configureSubviews() { accessibilityIdentifier = "ActionSheetView" backgroundView.translatesAutoresizingMaskIntoConstraints = false backgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.6) backgroundView.accessibilityIdentifier = "ActionSheetBackground" addSubview (backgroundView) cardView.translatesAutoresizingMaskIntoConstraints = false cardView.backgroundColor = Color.grayAsh.color addSubview (cardView) ScrollView.translatesAutoresizingMaskIntoConstraints = false cardView.addSubview(scrollView) stackView.translatesAutoresizingMaskIntoConstraints = false stackView.axis = .vertical stackView.alignment = .fill stackView.distribution = .fill stackView.spacing = 0 stackView.layoutMargins = UIEdgeInsets (вверху: UIConstants.edgeInset, слева: 0, внизу: UIConstants.edgeInset, справа: 0) stackView.isLayoutMarginsRelativeArrangement = true прокруткаView.addSubview(stackView) } функция configureConstraints() { backgroundView.snp.makeConstraints { (сделать) в make.edges.equalToSuperview() } cardView.snp.makeConstraints { (сделать) в make.leading.equalToSuperview() make.trailing.equalToSuperview() make.bottom.equalToSuperview().offset(0) make.height.equalTo(stackView.snp.height).offset(safeAreaInsets.bottom).priority(.low) // Используйте здесь высоту суперпредставления с множителем, чтобы избежать сбоя, когда представление карты почти заполняет отведенную высоту, непосредственно перед тем, как стать представлением с возможностью прокрутки. make.height.lessThanOrEqualToSuperview().multipliedBy(0,8).priority(.high) } ScrollView.snp.makeConstraints { (сделать) в make.top.equalToSuperview() make.leading.equalToSuperview() make.trailing.equalToSuperview() make.bottom.equalToSuperview() } stackView.snp.makeConstraints { (сделать) в make.edges.equalToSuperview() make.width.equalToSuperview() } } }