我試圖得到一個基本的東西，但我不能讓它作業！
我想要一個包含文本、影像和第二個文本的 VStack。一切都應該在螢屏上可見。所以影像應該調整大小（裁剪頂部和底部）為兩個文本提供空間......但不是。
問題（我認為）是因為影像的高度很高！
（我嘗試使用 GeometryReader、fixedSize、layoutPriority，但我嘗試過的沒有任何效果）
圖片來自維基百科：圖片鏈接
struct TestView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}.background(Color.blue)
}
}
模擬器畫面
需要什么：需要 什么的影像
謝謝 ：）
uj5u.com熱心網友回復：
你有沒有嘗試過
struct TestView: View {
var body: some View {
VStack(spacing: 8) { // You can alternatively increase the spacing and remove the padding for the image
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}.background(Color.blue)
.padding() // Note padding here
}
}
uj5u.com熱心網友回復：
struct TestView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}
.background(Color.blue)
.padding(.top)
}
}
如果您知道希望它有多大，也可以使用 maxHeight 框架引數來構建視圖。您也可以在影像本身上執行此操作。
struct TestView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}
.background(Color.blue)
.frame(maxHeight: 500) //500 can be any value of your choice
}
}
uj5u.com熱心網友回復：
看來您正在尋找一種考慮的方法Safe Area。因為在第二張圖片中，所有內容都與安全區域有關，而第一張圖片則不然。然而，代碼似乎默認這樣做，除非我們通過使用來指示忽略安全區域.ignoresSafeArea()。查看您呼叫的視圖TextView，您可能會使用ZStack影響其子級的藍色背景。
uj5u.com熱心網友回復：
您還可以使用帶有占位符的AsyncImage來加載影像
struct ContentView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
AsyncImage(url: URL(string: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Isabella_of_France_by_Froissart.png/1024px-Isabella_of_France_by_Froissart.png")){ image in
image.resizable()
}placeholder: {
ProgressView()
}
.scaledToFill()
.frame(width: 200, height: 400, alignment: .center)
Text("Text 2")
}
.background(Color.blue)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/413569.html
標籤：
上一篇：如何將燒瓶中的影像從靜態檔案夾傳遞給python處理？
下一篇：不重疊某些像素的隨機矩形