iOS 14 中等大小的小部件背景图像拒绝填充
iOS 14 Medium Widget Size Background Image Refuses to Fill
出于某种原因,我无法在 XCode 版本 12.0 中正确获取 aspectFill 的图像背景,但仅限于 .systemMedium
小部件大小。它似乎在小尺寸和大尺寸上都能完美工作。
我有一个非常简单的视图:
import SwiftUI
@available(iOS 13.0.0, *)
struct Banana: View {
var body: some View {
VStack(alignment: .leading){
Spacer()
Text("Aardvark Exactlywhat")
.font(.largeTitle)
.bold()
.padding(.bottom, 20)
.padding(.leading, 20)
.padding(.trailing, 20)
.minimumScaleFactor(0.5)
.foregroundColor(.white)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(4),
y: CGFloat(4))
}
.edgesIgnoringSafeArea(.all)
.background(
Image("bananas")
.resizable()
.scaledToFill()
).edgesIgnoringSafeArea(.all)
}
}
@available(iOS 13.0.0, *)
struct Banana_Previews: PreviewProvider {
static var previews: some View {
Banana()
}
}
还有一个非常简单的小部件:
struct fruitWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
Banana()
}
}
@main
struct fruitWidget: Widget {
let kind: String = "fruitWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
fruitWidgetEntryView(entry: entry)
}
.configurationDisplayName("fruit Widget")
.description("Enhance your day with delicious fruit.")
.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
}
}
struct fruitWidget_Previews: PreviewProvider {
static var previews: some View {
Group{
fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
.previewContext(
WidgetPreviewContext(family: .systemSmall))
fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
.previewContext(
WidgetPreviewContext(family: .systemMedium))
fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
.previewContext(
WidgetPreviewContext(family: .systemLarge))
}
}
}
我试过使用 GeometryReader 和 frame() 以及其他十几种变体来更改纵横比。无论我尝试什么,我都会在中等小部件的左侧和右侧得到白色 space。它仅适用于大尺寸和小尺寸。见图:
这是固定的变体 - 作为背景图像,您必须 VStack
展开到全屏。
注意:edgesIgnoringSafeArea
允许在内容较宽时超出安全区域,但不能使内容变宽。
var body: some View {
VStack(alignment: .leading){
Spacer()
Text("Aardvark Exactlywhat")
.font(.largeTitle)
.bold()
.padding(.bottom, 20)
.padding(.leading, 20)
.padding(.trailing, 20)
.minimumScaleFactor(0.5)
.foregroundColor(.white)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(4),
y: CGFloat(4))
}
.frame(maxWidth: .infinity, maxHeight: .infinity) // << this one !!
.edgesIgnoringSafeArea(.all)
.background(
Image("plant")
.resizable()
.scaledToFill()
)
}
出于某种原因,我无法在 XCode 版本 12.0 中正确获取 aspectFill 的图像背景,但仅限于 .systemMedium
小部件大小。它似乎在小尺寸和大尺寸上都能完美工作。
我有一个非常简单的视图:
import SwiftUI
@available(iOS 13.0.0, *)
struct Banana: View {
var body: some View {
VStack(alignment: .leading){
Spacer()
Text("Aardvark Exactlywhat")
.font(.largeTitle)
.bold()
.padding(.bottom, 20)
.padding(.leading, 20)
.padding(.trailing, 20)
.minimumScaleFactor(0.5)
.foregroundColor(.white)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(4),
y: CGFloat(4))
}
.edgesIgnoringSafeArea(.all)
.background(
Image("bananas")
.resizable()
.scaledToFill()
).edgesIgnoringSafeArea(.all)
}
}
@available(iOS 13.0.0, *)
struct Banana_Previews: PreviewProvider {
static var previews: some View {
Banana()
}
}
还有一个非常简单的小部件:
struct fruitWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
Banana()
}
}
@main
struct fruitWidget: Widget {
let kind: String = "fruitWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
fruitWidgetEntryView(entry: entry)
}
.configurationDisplayName("fruit Widget")
.description("Enhance your day with delicious fruit.")
.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
}
}
struct fruitWidget_Previews: PreviewProvider {
static var previews: some View {
Group{
fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
.previewContext(
WidgetPreviewContext(family: .systemSmall))
fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
.previewContext(
WidgetPreviewContext(family: .systemMedium))
fruitWidgetEntryView(entry: SimpleEntry(date: Date()))
.previewContext(
WidgetPreviewContext(family: .systemLarge))
}
}
}
我试过使用 GeometryReader 和 frame() 以及其他十几种变体来更改纵横比。无论我尝试什么,我都会在中等小部件的左侧和右侧得到白色 space。它仅适用于大尺寸和小尺寸。见图:
这是固定的变体 - 作为背景图像,您必须 VStack
展开到全屏。
注意:edgesIgnoringSafeArea
允许在内容较宽时超出安全区域,但不能使内容变宽。
var body: some View {
VStack(alignment: .leading){
Spacer()
Text("Aardvark Exactlywhat")
.font(.largeTitle)
.bold()
.padding(.bottom, 20)
.padding(.leading, 20)
.padding(.trailing, 20)
.minimumScaleFactor(0.5)
.foregroundColor(.white)
.shadow(
color: Color.black,
radius: 1.0,
x: CGFloat(4),
y: CGFloat(4))
}
.frame(maxWidth: .infinity, maxHeight: .infinity) // << this one !!
.edgesIgnoringSafeArea(.all)
.background(
Image("plant")
.resizable()
.scaledToFill()
)
}