[英]SwiftUI Button proportional width height
我們如何在SwiftUI
中實現Button
的proportional
大小
struct ContentView: View {
@State private var emailText = ""
@State private var passwordText = ""
var body: some View {
NavigationView {
ScrollView {
VStack(alignment: .center, spacing: 30.0, content: {
TextField("Enter Email", text: $emailText)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("Enter Password", text: $passwordText)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button(action: {
print("Button Tapped")
}) {
Text("Login")
}.frame(width: 100,
height: 40,
alignment: .center).background(Color.orange)
Button(action: {
print("Button Tapped")
}) {
Text("Sign Up")
}.frame(width: 150,
height: 40,
alignment: .center).background(Color.yellow)
}).padding()
}
.navigationBarTitle("Login")
}
}
}
如何根據設備實現登錄和注冊按鈕的比例。
您可以使用GeometryReader
訪問設備size
和frame
以設置按鈕的比例寬度。 例如:
struct ContentView: View {
@State private var emailText = ""
@State private var passwordText = ""
var body: some View {
GeometryReader { geometry in
NavigationView {
ScrollView {
VStack(alignment: .center, spacing: 30.0, content: {
TextField("Enter Email", text: self.$emailText)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("Enter Password", text: self.$passwordText)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button(action: {
print("Button Tapped")
}) {
Text("Login")
}.frame(width: geometry.size.width / 4,
height: 40,
alignment: .center).background(Color.orange)
Button(action: {
print("Button Tapped")
}) {
Text("Sign Up")
}.frame(width: geometry.size.width / 3,
height: 40,
alignment: .center).background(Color.yellow)
}).padding()
}
.navigationBarTitle("Login")
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.