如何在 swiftUI 中创建一个普通视图
How to create a plain view in swiftUI
我正在尝试在 SwiftUI 中创建一个带有背景色的普通视图。但是我能找到的所有内容都是不是普通视图的元素,例如文本、按钮、图像、列表等。
当我尝试使用 View
时,它显示以下错误消息:
- 'View' cannot be constructed because it has no accessible initializers
- 'View' Protocol can only be used as a generic constraint because it has Self or associatedType requirements
如何创建带背景颜色的矩形视图?
只需使用 Rectangle()
如 Documentation 所述:
A rectangular shape aligned inside the frame of the view containing it.
这里是一个具有固定大小和背景颜色的矩形示例
Rectangle()
.size(CGSize(width: 10, height: 10))
.foregroundColor(.red)
正如另一个答案中所建议的,您可以像 Rectangle()
这样使用 Shape 并将其设置为 size
和 foregroundColor
:
Rectangle()
.size(CGSize(width: 10, height: 10))
.foregroundColor(.blue)
不过我觉得直接用Color
更简单:
Color.blue
.frame(width: 10, height: 10)
以防万一您的用例类似于为 TextField 视图创建背景,下面是我如何做的演示
此处的示例将创建一个带有不透明辅助背景的小视图,然后在其顶部呈现一个表示用户输入位置的标签,另一个白色圆角矩形,并在白色矩形内呈现一个 TextField() .
struct InputView : View {
@State var text: String
var body: some View {
ZStack{
RoundedRectangle(cornerRadius: 15).frame(width: 310, height: 100)
.foregroundColor(.secondary)
.offset(y: -20)
ZStack{
RoundedRectangle(cornerRadius: 30).frame(width: 290, height: 40)
.foregroundColor(.white)
TextField($text, placeholder: Text("City, State, Address")) {
print(self.text)
self.didEnter.toggle()
}
.frame(width: 220, height: 40, alignment: .leading)
.offset(x: -20)
Text("Select Location:").bold().fontWeight(.medium)
.offset(y: -40)
.foregroundColor(.white)
}
}
}
}
这是另一种创建类似于 UIView 的方法。在 SwiftUI 中,每个原始视图都像 UIView 一样工作。
struct CustomView : View {
var body: some View {
ZStack{
Color.red.frame(width: 300, height: 300)
Text("This is view")
}
}
}
我正在尝试在 SwiftUI 中创建一个带有背景色的普通视图。但是我能找到的所有内容都是不是普通视图的元素,例如文本、按钮、图像、列表等。
当我尝试使用 View
时,它显示以下错误消息:
- 'View' cannot be constructed because it has no accessible initializers
- 'View' Protocol can only be used as a generic constraint because it has Self or associatedType requirements
如何创建带背景颜色的矩形视图?
只需使用 Rectangle()
如 Documentation 所述:
A rectangular shape aligned inside the frame of the view containing it.
这里是一个具有固定大小和背景颜色的矩形示例
Rectangle()
.size(CGSize(width: 10, height: 10))
.foregroundColor(.red)
正如另一个答案中所建议的,您可以像 Rectangle()
这样使用 Shape 并将其设置为 size
和 foregroundColor
:
Rectangle()
.size(CGSize(width: 10, height: 10))
.foregroundColor(.blue)
不过我觉得直接用Color
更简单:
Color.blue
.frame(width: 10, height: 10)
以防万一您的用例类似于为 TextField 视图创建背景,下面是我如何做的演示
此处的示例将创建一个带有不透明辅助背景的小视图,然后在其顶部呈现一个表示用户输入位置的标签,另一个白色圆角矩形,并在白色矩形内呈现一个 TextField() .
struct InputView : View {
@State var text: String
var body: some View {
ZStack{
RoundedRectangle(cornerRadius: 15).frame(width: 310, height: 100)
.foregroundColor(.secondary)
.offset(y: -20)
ZStack{
RoundedRectangle(cornerRadius: 30).frame(width: 290, height: 40)
.foregroundColor(.white)
TextField($text, placeholder: Text("City, State, Address")) {
print(self.text)
self.didEnter.toggle()
}
.frame(width: 220, height: 40, alignment: .leading)
.offset(x: -20)
Text("Select Location:").bold().fontWeight(.medium)
.offset(y: -40)
.foregroundColor(.white)
}
}
}
}
这是另一种创建类似于 UIView 的方法。在 SwiftUI 中,每个原始视图都像 UIView 一样工作。
struct CustomView : View {
var body: some View {
ZStack{
Color.red.frame(width: 300, height: 300)
Text("This is view")
}
}
}