SwiftUI 背景默认为渐变

Question

我正在尝试用图像设置背景，如果没有图像默认为渐变，问题是我没有找到在 SwiftUI 的声明部分放置 if 的方法，并且我无法使用函数，因为图像不符合视图。有没有人有解决方案可以有条件地将背景设置为图像，如果无法将其设置为颜色？

struct ReminderView: View {
var reminder: Reminder
var bgImage: Image? {
if let data = reminder.image, let image = UIImage(data: data) {
return Image(uiImage: image).resizable()
}
return nil
}
var bg: LinearGradient {
return LinearGradient(gradient: Gradient(colors: [
Color(.sRGB, red: 38 / 255, green: 63 / 255, blue: 159 / 255, opacity: 1),
Color(.sRGB, red: 174 / 255, green: 77 / 255, blue: 1, opacity: 1)]),
startPoint: UnitPoint(x: 0, y: 1), endPoint: UnitPoint(x: 1, y: 0))
}
var body: some View {
GeometryReader { (geometry) in
VStack(alignment: .center, spacing: 0) {
Group {
Spacer()
Spacer()
}.shadow(color: .gray, radius: 5, x: 0, y: 0)
}.frame(width: geometry.size.width,
height: geometry.size.width / CGFloat(Card.aspectRatio))
.background((self.bgImage != nil) ? self.bgImage! : self.bg)
.cornerRadius(10)
.shadow(radius: 10)
}
}
}

问题是我也试过这个，但不起作用：

var bgImage: some View {
if let data = reminder.image, let image = UIImage(data: data) {
return Image(uiImage: image).resizable()
}
return LinearGradient(gradient: Gradient(colors: [
Color(.sRGB, red: 38 / 255, green: 63 / 255, blue: 159 / 255, opacity: 1),
Color(.sRGB, red: 174 / 255, green: 77 / 255, blue: 1, opacity: 1)]),
startPoint: UnitPoint(x: 0, y: 1), endPoint: UnitPoint(x: 1, y: 0))
}

它说：函数声明一个不透明的返回类型，但其主体中的返回语句没有匹配......

Answer 1

这是由于您尝试在背景中设置不同类型的视图。有一个简单的方法可以解决这个问题：

.background((self.bgImage != nil) ? AnyView(self.bgImage!) : AnyView(self.bg))

Answer 2

实际上，您无法使用上述代码行返回AnyView。如果你想返回任何类型的UIComponents，你可以这样做：

struct ContentView: View {
var body: some View {
VStack {
decicidedView(data: nil)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
func decicidedView(data:Data?) -> AnyView {
if data == nil {
return AnyView(Image("abc.png"))
} else {
return AnyView(Image("abc.png").background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)))
}
}