[英]How to position my button to the Bottom of the Screen? SwiftUI
Below is my code to make a View in SwiftUI.下面是我在 SwiftUI 中创建视图的代码。 I want to position my Welcome button to the bottom of the screen as shown below.
我想将我的欢迎按钮position 到屏幕底部,如下图所示。
struct welcomeViewControllerView: View {
var body: some View {
Text("Welcome")
.font(.system(size: 20, design: .rounded))
.padding(.leading)
.multilineTextAlignment(.center)
.background(
Image("splashBackground")
.resizable()
.edgesIgnoringSafeArea(.all)
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
Button(action:{print("button pressed")})
{
Text("Continue")
.font(.system(size: 20, design: .rounded))
.foregroundColor(.black)
.frame(width: 300, height: 50, alignment: .center)
.background((Image("buttonImage")).resizable().frame(width: 300, height: 50, alignment: .center))
}
}
}
class welcomeViewController: UIHostingController<welcomeViewControllerView> {
required init?(coder: NSCoder)
{
super.init(coder: coder,rootView: welcomeViewControllerView());
}
override func viewDidLoad()
{
super.viewDidLoad()
view.backgroundColor = .white
}
}
How can I position my button to the bottom of the screen?我怎样才能把我的按钮按到屏幕底部? I posted the screen below.
我在下面发布了屏幕。 I am fairly new to using SwiftUI.
我对使用 SwiftUI 相当陌生。
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "heart.fill")
.resizable()
.frame(width: 60, height: 60)
.foregroundColor(.red)
Group{
Text("Welcome!")
.font(.title)
Button(action: {
print("tapped!")
}, label: {
Text("Continue")
.foregroundColor(.white)
.frame(width: 200, height: 40)
.background(Color.green)
.cornerRadius(15)
.padding()
})
}.frame(maxHeight: .infinity, alignment: .bottom)
}
}
}
Result:结果:
Your question included a background image, the code below uses ZStack and Spacer to get the layout with a background underneath.您的问题包括背景图片,下面的代码使用 ZStack 和 Spacer 来获取下面有背景的布局。 Spacer is definitely your friend to push content horizontally or vertically.
Spacer 绝对是您水平或垂直推送内容的朋友。
For the background, because it is mostly black, I used Color.black to paint the entire screen and assume you could use a smaller image for the logo.对于背景,因为它大部分是黑色的,所以我使用 Color.black 来绘制整个屏幕,并假设您可以使用较小的图像作为徽标。 This lets you ship a way smaller image which won't distort.
这可以让您发送一个不会扭曲的更小图像。 Separating the screen color also lets you match the device light/dark mode settings.
分离屏幕颜色还可以让您匹配设备的亮/暗模式设置。 See Color(UIColor.systemBackground) and @Environment(.colorScheme) if interested.
如果有兴趣,请参阅 Color(UIColor.systemBackground) 和 @Environment(.colorScheme)。
ZStack {
Color.black
Text("Welcome")
.foregroundColor(.white)
.font(.title)
VStack {
Image(systemName:"flame.fill")
.resizable()
.aspectRatio(contentMode:.fit)
.foregroundColor(Color.blue)
.frame(height:100)
.padding([.top], 20)
Spacer() // will spread content to top and bottom of VStack
Button(action:{print("Continue")}){
Text("Continue")
.foregroundColor(.black)
.padding(10)
.background(Color.green)
.cornerRadius(10)
}
Spacer()
.frame(height:50) // limit spacer size by applying a frame
}
}
Above gets you below: Layout with bkg using ZStack and Spacer以上为您提供以下信息:使用 ZStack 和 Spacer 使用 bkg 进行布局
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.