swiftui - GeometryReader 不需要的全高/全宽行为
问题描述
我使用GeometryReader
来确保图像永远不会超过屏幕宽度的一半。GeometryReader
但是,当请求视图的完整高度/宽度时,它会弄乱我的视图的其余部分(如带有绿色 BG 的图像所示)。好像它插入了不需要的Spacer()
.
struct ContentView: View {
var body: some View {
VStack{
VStack {
GeometryReader{ g in
HStack{
Text("Text Left").background(Color.yellow)
Image(systemName: "checkmark")
.resizable()
.aspectRatio(contentMode:.fit)
.frame(maxWidth: g.size.width/2)
}.background(Color.yellow)
}.background(Color.green)
}
Text("Bottom Text")
// This Spacer should push the "Bottom Text" right below the other Text and Image
Spacer()
}
}
}
如果我删除GeometryReader
并将宽度设置为固定大小,它会按预期工作并且绿色 BG 不会出现。
struct ContentView: View {
var body: some View {
VStack{
VStack {
HStack{
Text("Text Left").background(Color.yellow)
Image(systemName: "checkmark")
.resizable()
.aspectRatio(contentMode:.fit)
.frame(maxWidth: 200)
}.background(Color.yellow)
}.background(Color.green)
Text("Bottom Text")
Spacer()
}
}
}
这是一个错误还是如何使用 实现动态宽度GeometryReader
?
解决方案
为什么要在 vstack 中设置几何读取器?也许你有一个理由......但这种方式,我认为,如你所愿?!
但是,是的,你是对的,几何阅读器的东西很奇怪......
GeometryReader{ g in
VStack{
VStack {
HStack{
Text("Text Left").background(Color.yellow)
Image(systemName: "checkmark")
.resizable()
.aspectRatio(contentMode:.fit)
.frame(maxWidth: g.size.width/2)
.background(Color.red)
}.background(Color.yellow)
}
Text("Bottom Text")
// This Spacer should push the "Bottom Text" right below the other Text and Image
Spacer()
}
}.background(Color.green)
推荐阅读
- angular - *ngFor 中的动态角度选择选项
- javascript - 用另一个对象ReactJS替换数组中的对象
- javascript - 如何将整数列表乘以html中的一个字符串?
- javascript - 从特定位置之间的数组中获取最大值
- reactjs - 我应该使用我的钩子来显示/隐藏组件的链接没有按预期工作
- c# - 如何将 where 子句添加到实体框架查询
- jquery - JQuery attr() 不是函数,如何将其转换为对象?
- go - 如何在通过 gocb 构建对 couchbase 的查询期间配置存储桶名称
- angular - 如何在Angular中使用带有函数的异步管道?
- javascript - array.prototype.map() 需要计算 NFL 球队的赢、输、平