SwiftUI-工作表中有一个固定的“继续"按钮，该按钮不可滚动 [英] SwiftUI - in sheet have a fixed continue button that is not scrollable
本文介绍了SwiftUI-工作表中有一个固定的“继续"按钮，该按钮不可滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如您所见，即使我试图将纸页往下拉，继续按钮也不会向下移动.如何使我的工作表具有这种行为?在我的应用中，继续按钮将移出屏幕.这是当薄板被略微下拉时我的应用程序的外观:
As you can see even though I am trying to pull the sheet down, the continue button does not move down. How can I make my sheet to behave like that? In my app the continue button moves offscreen. This is how my app looks when the sheet is pulled down slightly:
我还在下面附加了我的代码，它在横向和纵向方向上看起来都很美观.有没有办法在不破坏iPhone 7等较小设备的横向外观的情况下实现这一目标?
I have also attached my code below, it looks aesthetic on both landscape and portrait orientation. Is there a way to pull this off without ruining how it looks on landscape on smaller devices such as the iPhone 7?
import SwiftUI
struct IntroView: View {
@State private var animationAmount: CGFloat = 1
@Environment(\.presentationMode) var presentationMode
@Environment(\.verticalSizeClass) var sizeClass
var body: some View {
VStack {
VStack {
Spacer()
if sizeClass == .compact {
HStack {
Text("Welcome to Demo").fontWeight(.heavy)
Text("App").foregroundColor(.orange).fontWeight(.heavy)
}
.padding(.bottom, 10)
}
else {
Text("Welcome to").fontWeight(.heavy)
HStack {
Text("Demo").fontWeight(.heavy)
Text("App").foregroundColor(.orange).fontWeight(.heavy)
}
.padding(.bottom, 30)
}
}//Intro VStack close
.font(.largeTitle)
.frame(maxWidth: .infinity, maxHeight: 180)
VStack (spacing: 30) {
HStack (spacing: 20) {
Image(systemName: "sparkle")
.foregroundColor(.yellow)
.font(.title2)
.scaleEffect(animationAmount)
.onAppear {
let baseAnimation = Animation.easeInOut(duration: 1)
let repeated = baseAnimation.repeatForever(autoreverses: true)
return withAnimation(repeated) {
self.animationAmount = 1.5
}
}
VStack (alignment: .leading) {
Text("All new design").fontWeight(.semibold)
Text("Easily view all your essentials here.")
.foregroundColor(.gray)
}
Spacer()
}//HStack 1
.padding([.leading, .trailing], 10)
HStack (spacing: 20) {
Image(systemName: "pin")
.foregroundColor(.red)
.font(.title2)
.padding(.trailing, 5)
.scaleEffect(animationAmount)
.onAppear {
let baseAnimation = Animation.easeInOut(duration: 1)
let repeated = baseAnimation.repeatForever(autoreverses: true)
return withAnimation(repeated) {
self.animationAmount = 1.5
}
}
VStack (alignment: .leading) {
Text("Pin favourites").fontWeight(.semibold)
Text("You can pin your favourite content on all devices")
.foregroundColor(.gray)
}
Spacer()
}//HStack 2
.padding([.leading, .trailing], 10)
.frame(maxWidth: .infinity, maxHeight: 100)
HStack (spacing: 20) {
Image(systemName: "moon.stars.fill")
.foregroundColor(.blue)
.font(.title2)
.scaleEffect(animationAmount)
.onAppear {
let baseAnimation = Animation.easeInOut(duration: 1)
let repeated = baseAnimation.repeatForever(autoreverses: true)
return withAnimation(repeated) {
self.animationAmount = 1.5
}
}
VStack (alignment: .leading) {
Text("Flexible").fontWeight(.semibold)
Text("Supports dark mode")
.foregroundColor(.gray)
}
Spacer()
}//HStack 3
.padding([.leading, .trailing], 10)
}//VStack for 3 criterias
.padding([.leading, .trailing], 20)
Spacer()
Button {
presentationMode.wrappedValue.dismiss()
UserDefaults.standard.set(true, forKey: "LaunchedBefore")
} label: {
Text("Continue")
.fontWeight(.medium)
.padding([.top, .bottom], 15)
.padding([.leading, .trailing], 90)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(15)
}
.frame(maxWidth: .infinity, maxHeight: 100)
}//Main VStack
}
}
struct IntroView_Previews: PreviewProvider {
static var previews: some View {
IntroView()
}
}
推荐答案
以下是可能方法的演示(调整和效果超出范围-尝试使演示代码简短).想法是用上方按钮注入UIView支架，使其在图纸向下拖动过程中持续存在(因为发现显示任何动态偏移都会产生难看的不希望有的抖动效果).
Here is a demo of possible approach (tuning & effects are out of scope - try to make demo code short). The idea is to inject UIView holder with button above sheet so it persist during sheet drag down (because as findings shown any dynamic offsets gives some ugly undesired shaking effects).
通过Xcode 12/iOS 14测试
Tested with Xcode 12 / iOS 14
// ... your above code here
}//VStack for 3 criterias
.padding([.leading, .trailing], 20)
Spacer()
// button moved from here into below background view !!
}.background(BottomView(presentation: presentationMode) {
Button {
presentationMode.wrappedValue.dismiss()
UserDefaults.standard.set(true, forKey: "LaunchedBefore")
} label: {
Text("Continue")
.fontWeight(.medium)
.padding([.top, .bottom], 15)
.padding([.leading, .trailing], 90)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(15)
}
})
//Main VStack
}
}
struct BottomView<Content: View>: UIViewRepresentable {
@Binding var presentationMode: PresentationMode
private var content: () -> Content
init(presentation: Binding<PresentationMode>, @ViewBuilder _ content: @escaping () -> Content) {
_presentationMode = presentation
self.content = content
}
func makeUIView(context: Context) -> UIView {
let view = UIView()
DispatchQueue.main.async {
if let window = view.window {
let holder = UIView()
context.coordinator.holder = holder
// simple demo background to make it visible
holder.layer.backgroundColor = UIColor.gray.withAlphaComponent(0.5).cgColor
holder.translatesAutoresizingMaskIntoConstraints = false
window.addSubview(holder)
holder.heightAnchor.constraint(equalToConstant: 140).isActive = true
holder.bottomAnchor.constraint(equalTo: window.bottomAnchor, constant: 0).isActive = true
holder.leadingAnchor.constraint(equalTo: window.leadingAnchor, constant: 0).isActive = true
holder.trailingAnchor.constraint(equalTo: window.trailingAnchor, constant: 0).isActive = true
if let contentView = UIHostingController(rootView: content()).view {
contentView.backgroundColor = UIColor.clear
contentView.translatesAutoresizingMaskIntoConstraints = false
holder.addSubview(contentView)
contentView.topAnchor.constraint(equalTo: holder.topAnchor, constant: 0).isActive = true
contentView.bottomAnchor.constraint(equalTo: holder.bottomAnchor, constant: 0).isActive = true
contentView.leadingAnchor.constraint(equalTo: holder.leadingAnchor, constant: 0).isActive = true
contentView.trailingAnchor.constraint(equalTo: holder.trailingAnchor, constant: 0).isActive = true
}
}
}
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
if !presentationMode.isPresented {
context.coordinator.holder.removeFromSuperview()
}
}
func makeCoordinator() -> Coordinator {
Coordinator()
}
class Coordinator {
var holder: UIView!
deinit {
holder.removeFromSuperview()
}
}
}
这篇关于SwiftUI-工作表中有一个固定的“继续"按钮，该按钮不可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
