I have view, where inside ScrollView stackView, with content what expand after tap on button, and then I should scroll this page. in the bottom I have HStack with buttons, up there "RatingViews". I need to make the buttons from the last HStack always be at the bottom, and always have the same indentation. before expanding and after that.
they should be offset 8 from the safe area and 40 from the last "rating view". how do I achieve this?
code:
import SwiftUI
struct SH1ViewResult: View {
@State var text: String = "long text long text long text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long textlong text long text"
@State var userVoice: Bool = false
@State var isExpanded: Bool = false
@State var score: Int = 69
var quit: () -> Void
var body: some View {
GeometryReader { geometry in
ScrollView {
VStack {
Rectangle()
.background(Color.blue)
.frame(width: .infinity, height: 50)
VStack {
ScrollView {
Text("\(text)")
.padding([.top, .bottom, .leading, .trailing], 12)
}
.disabled(isExpanded)
}
.background(Color.green)
.frame(width: geometry.size.width - 32,
height: isExpanded ?
.infinity :
geometry.size.height * 0.40
)
.overlay(
VStack {
Spacer()
Image("Chevron")
.renderingMode(.template)
.resizable()
.frame(width: 8, height: 13)
.foregroundColor(Color.black)
.rotationEffect(.degrees(-90))
.padding(.bottom, 4)
.onTapGesture {
isExpanded = true
}
}
.frame(width: geometry.size.width - 32, height: 40)
.background(
LinearGradient(gradient:
Gradient(colors:
[Color.green,
Color.gray]),
startPoint: .top,
endPoint: .bottom
)
)
.opacity(isExpanded ? 0 : 1),
alignment: .bottom
)
.cornerRadius(10)
HStack(spacing: 24) {
Button {
print("example sound")
} label: {
Image(systemName: "")
.resizable()
.frame(width: 108, height: 42)
}
Button {
print("uservoice")
} label: {
Image(systemName: "")
.resizable()
.frame(width: 108, height: 42)
}
}
.padding(.top, 16)
VStack {
RatingStarsView(score: .constant(55),
labelIsShow: .constant(true)
)
}
.padding(.top, 16)
VStack {
HStack {
Spacer()
Text("first")
.frame(maxWidth: .infinity)
RatingStarsView(score: .constant(72),
labelIsShow: .constant(false)
)
.frame(maxWidth: .infinity)
Spacer()
}
.padding(.bottom, 24)
.frame(width: geometry.size.width - 64, height: 30)
HStack {
Spacer()
Text("second")
.frame(maxWidth: .infinity)
RatingStarsView(score: .constant(85),
labelIsShow: .constant(false)
)
.frame(maxWidth: .infinity)
Spacer()
}
.frame(width: geometry.size.width - 64, height: 30)
}
.padding(.top, 22)
Spacer()
.frame(height: 8)
HStack(spacing: 20) {
Button {
print("button")
} label: {
Text("button 1")
.font(.system(size: 17, weight: .medium))
.frame(maxWidth: .infinity, maxHeight: 10)
.padding([.leading, .trailing], 16 )
}
.buttonStyle(LightGreenButton())
.disabled(userVoice ? true : false)
Button {
print("tapped next")
} label: {
Text("button 2")
.font(.system(size: 17, weight: .medium))
.frame(maxWidth: .infinity, maxHeight: 10)
.padding([.leading, .trailing], 16)
}
.buttonStyle(FilledButton())
.disabled(userVoice ? true : false)
}
.padding([.leading, .trailing], 16)
.frame(width: geometry.size.width - 32)
}
.frame(height: isExpanded ? .infinity : geometry.size.height)
}
.scrollEnabled(isExpanded)
}
}
}
extension View {
@ViewBuilder func scrollEnabled(_ enabled: Bool) -> some View {
if enabled {
self
} else {
simultaneousGesture(DragGesture(minimumDistance: 0),
including: .all)
}
}
}
