SwiftUI: построить представление из нижнего выравнивания в scrollView
Есть ли способ создавать элементы пользовательского интерфейса в SwiftUI внутри прокрутки с нижним выравниванием?
Мой вариант использования: у меня есть экран, на котором
- Spacer (все, что осталось после выделения нижеприведенных элементов)
- ЛоготипВид
- Прокладка () - 30
- Немного текста - 4/5 строк
- Spacer() - 50 (это будет рассчитано по высоте размера GR)
- HStack с двумя кнопками — это должно быть закреплено в нижней части экрана / ScrollView
Я хотел бы знать, как я могу прикрепить представление HStack к ScrollView Bottom
Я воспроизвел свою настройку и воспроизвел свои проблемы на игровой площадке Swift, например так
struct ContentView: View {
var body: some View {
GeometryReader { gr in
ScrollView {
VStack {
Spacer()
Image(systemName: "applelogo")
.resizable()
.frame(width: gr.size.width * 0.5, height: gr.size.height * 0.3, alignment: .center)
Spacer().padding(.bottom, gr.size.height * 0.01)
Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME")
.fontWeight(.regular)
.foregroundColor(.green)
.multilineTextAlignment(.center)
.padding(.top, gr.size.height * 0.05)
.padding(.horizontal, 40)
.layoutPriority(1)
Spacer()
.frame(minHeight: gr.size.height * 0.12)
HStack {
Button(action: {
}, label: {
Text("Button 1")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
Button(action: {
}, label: {
Text("Button 2")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
}
.padding(.horizontal, 20)
}
//.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
}
}
Я понимаю, что когда scrollView вводится в представлении SwiftUI, длина проставки изменяется на ноль. Хотелось бы знать, как лучше всего это сделать.
@HarshilPatel Пожалуйста, найдите обновленное описание выше (надеюсь, оно поможет). Я хочу, чтобы кнопки закреплялись снизу (он же Scroll View)
Это отвечает на ваш вопрос stackoverflow.com/a/58708206/12299030?
@Asperi, нет. Я не собираюсь настраивать поведение scrollView, я искал подход к тому, как прикрепить представления к нижней части scrollView (аналогично нижнему ограничению раскадровки).
Подход заключается в том, чтобы иметь прокладку над вашей кнопкой. Высота этой прокладки должна быть рассчитана на основе высоты прокрутки (содержимое прокрутки). Затем это нужно передать вверх по иерархии представлений с помощью PreferenceKey, а затем использовать его для установки высоты прокладки.
Я хотел бы добавить 25% пустого пространства между кнопкой и текстом, остальные 75% пустого пространства между видом сверху и логотипом Apple. Другими словами, создание представления снизу, прикрепляющего мое представление содержимого снизу к нижней части scrollView.
Ответы 2
struct SampleView: View {
var body: some View {
GeometryReader { gr in
VStack {
ScrollView {
VStack {
// Fills whatever space is left
Rectangle()
.foregroundColor(.clear)
Image(systemName: "applelogo")
.resizable()
.frame(width: gr.size.width * 0.5, height: gr.size.height * 0.3, alignment: .center)
.padding(.bottom, gr.size.height * 0.06)
Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME")
.fontWeight(.regular)
.foregroundColor(.green)
.multilineTextAlignment(.center)
.padding(.horizontal, 40)
.layoutPriority(1)
// Fills 12 %
Rectangle()
.frame(height: gr.size.height * 0.12)
.foregroundColor(.clear)
HStack {
Button(action: {
}, label: {
Text("Button 1")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
Button(action: {
}, label: {
Text("Button 2")
})
.foregroundColor(Color.white)
.padding(.vertical)
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
}
.padding(.horizontal, 20)
.padding(.bottom, 20)
}
// Makes the content stretch to fill the whole scroll view, but won't be limited (it can grow beyond if needed)
.frame(minHeight: gr.size.height)
}
}
}
}
}
Я хотел, чтобы прокрутка отображалась снизу вверх, а не сверху вниз. На это был мой ответ: https://www. Thirdrocktechkno.com/blog/implementing-reversed-scrolling-behaviour-in-swiftui/
TLDR: .rotationEffect(Angle(degrees: 180)).scaleEffect(x: -1.0, y: 1.0, anchor: .center) на прокрутке И на элементах в прокрутке
Можете ли вы загрузить изображение или эскиз пользовательского интерфейса вашего намерения?