SwiftUI Button 比例宽度高度
Posted
技术标签:
【中文标题】SwiftUI Button 比例宽度高度【英文标题】:SwiftUI Button proportional width height 【发布时间】:2019-10-16 11:47:57 【问题描述】:我们如何在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")
如何根据设备实现登录和注册按钮的比例。
【问题讨论】:
【参考方案1】:您可以使用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")
【讨论】:
以上是关于SwiftUI Button 比例宽度高度的主要内容,如果未能解决你的问题,请参考以下文章