swift - SwiftUI:如何找到图像的高度并使用它来设置框架的大小
问题描述
所以我一直试图弄清楚如何在 SwiftUI 中找到图像的高度,但没有成功。基本上我有纵向/横向图像,我想以大约 600 pt 高显示纵向图像,而我想显示横向图像,因此使用图像的宽度,所以高度是任意的。话虽如此,我希望它在 GeometryReader 中,因为我使用的偏移量使用它,因此当您向下滚动时,图像不会滚动,但如果您向上滚动,它会滚动。我不相信我可以共享图像,但无论如何,这应该足以成功运行它!
struct ContentView: View {
@Environment(\.presentationMode) var mode: Binding<PresentationMode>
var backButton: some View {
Button(action: {
withAnimation {
self.mode.wrappedValue.dismiss()
}
}) {
Image(systemName: "chevron.left.circle.fill")
.opacity(0.8)
.font(.system(size: 30))
.foregroundColor(.black)
.background(Color.gray.mask(Image(systemName: "chevron.left").offset(x: 9.4, y: 7.6)))
}
}
var body: some View {
ScrollView(showsIndicators: false) {
GeometryReader { geometry in
Image("image1")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(maxWidth: UIScreen.main.bounds.width, minHeight: 350, maxHeight: 600, alignment: .top)
.clipped()
.overlay(
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: Gradient(colors: [.clear, .white]), startPoint: .center, endPoint: .bottom))
)
.offset(y: geometry.frame(in: .global).minY > 0 ? -geometry.frame(in: .global).minY : 0)
}
.frame(minWidth: UIScreen.main.bounds.width, maxWidth: UIScreen.main.bounds.width, minHeight: 350, idealHeight: 600, maxHeight: 600)
//Message
VStack(alignment: .leading) {
Text("\(07/22/20) - Day \(1)")
.font(.body)
.fontWeight(.light)
.foregroundColor(Color.gray)
.padding(.leading)
Text("what I Love)
.font(.title)
.fontWeight(.bold)
.padding([.leading, .bottom])
Text("paragraph")
.padding([.leading, .bottom, .trailing])
}
}
.edgesIgnoringSafeArea(.all)
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: backButton)
}
}
任何帮助将非常感激!
编辑:这里有两张图片供参考 - 对不起,我没有意识到你能做到,尽管我应该想到这一点!
解决方案
如果我理解正确,您想要图像的大小,以便可以在自己的框架中使用它的尺寸?您可以创建一个函数,该函数接受图像名称并返回您想要的图像,同时还为and设置可以在框架中使用的@State
变量。width
height
@State var width: CGFloat = 0
@State var height: CGFloat = 0
func image(_ name: String) -> UIImage {
let image = UIImage(named: name)!
let width = image.size.width
let height = image.size.height
DispatchQueue.main.async {
if width > height {
// Landscape image
// Use screen width if < than image width
self.width = width > UIScreen.main.bounds.width ? UIScreen.main.bounds.width : width
// Scale height
self.height = self.width/width * height
} else {
// Portrait
// Use 600 if image height > 600
self.height = height > 600 ? 600 : height
// Scale width
self.width = self.height/height * width
}
}
return image
}
用法:
GeometryReader { geometry in
Image(uiImage: image("image1"))
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: width, height: height)
.overlay(
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: Gradient(colors: [.clear, .white]), startPoint: .center, endPoint: .bottom))
)
.offset(y: geometry.frame(in: .global).minY > 0 ? -geometry.frame(in: .global).minY : 0)
编辑:添加DispatchQueue.main.async
块作为“在视图更新期间修改状态”警告的快速修复。有效,但可能不是绝对最好的方法。将图像放入它自己的@State
并将其设置在视图的onAppear
方法中可能会更好。
编辑 2:将图像移动到它自己的@State
var 中,我认为这是一个更好的解决方案,因为它可以使视图更可重用,因为您可以传递图像而不是硬编码视图中图像的名称。
@State var image: UIImage {
didSet {
let width = image.size.width
let height = image.size.height
DispatchQueue.main.async {
if width > height {
// Landscape image
self.width = width > UIScreen.main.bounds.width ? UIScreen.main.bounds.width : width
self.height = self.width/width * height
} else {
self.height = height > 600 ? 600 : height
self.width = self.height/height * width
}
}
}
}
用法:
GeometryReader { geometry in
Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: width, height: height)
.overlay(
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: Gradient(colors: [.clear, .white]), startPoint: .center, endPoint: .bottom))
)
.offset(y: geometry.frame(in: .global).minY > 0 ? -geometry.frame(in: .global).minY : 0)
必须通过传入 UIImage 来更新 ContentView 的声明方式:
ContentView(image: UIImage(named: "image0")!)
推荐阅读
- json - 你如何在 Golang 中修改这个结构来接受两个不同的结果?
- javascript - 如何在 javascript 中的数字字符串之间放置分隔符,例如我有 123456,我想要 123,456 或 1000000 到 1,000,000
- android - 无法在布局 xml 中添加卡片视图
- postgresql - 如何在 SQL/PostgreSQL 中显示分数?
- r - 在ggplot中过滤多年的月份
- python - 当我在odoo 12中调用操作按钮时如何保持向导在后台打开
- git - 使用一个命令动态创建 .gitmodules 并克隆/拉取所有存储库
- sql - 如何使用while循环遍历表并创建另一个具有所需值的表
- php - 从子调用父类成员而不调用构造函数依赖项
- typescript - 任何值 ESLint 错误的 Typescript 不安全赋值