如何在HStack
中水平居中View
(Image
)?我希望按钮左对齐,图像水平居中视图。
目前我有这样的结构:
VStack {
HStack {
Button(action: {
print("Tapped")
}, label: {
Image("left-arrow")
.resizable()
.frame(width: 30, height: 30, alignment: .leading)
}).padding(.leading, 20)
Spacer()
Image("twitter-logo")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
}
Spacer()
}
这给了我这个:
但我要实现这一点:
8条答案
按热度按时间qyswt5oh1#
你可以在一个
ZStack
中嵌入两个HStack
,并放置相应的水平间距的间隔。将所有这些都嵌入一个VStack
和一个Spacer()
,以使所有东西都推到顶部。注意:在第二个
HStack
中,图像应该自动居中对齐,但如果不是,您可以在图像前后放置一个Spacer()
。编辑:添加了
VStack
和Spacer()
,将所有内容移到顶部,就像OP想要的那样。编辑2:删除了图像上的填充,因为它导致图像稍微偏离中心。由于它在自己的
HStack
中并且中心对齐,所以不需要填充。编辑3:感谢评论中的@Chris Prince,我决定创建一个简单的NavigationBar风格的自定义视图,您可以提供left、center和right参数来创建OP所需的效果(其中每组视图彼此独立对齐):
用法:
wribegjk2#
如何将按钮大小保存到属性中,并在图像中添加一个负填充?注意图像后面的附加间隔。
结果:
v2g6jxz63#
对我来说最简单的方法:
vfhzx4xs4#
使用position属性将视图居中,请尝试以下代码
sd2nnvve5#
使标题像导航栏一样居中的正确方法:
ojsjcaue6#
我有一个替代的解决方案。我用一个隐藏的图像作为占位符。
当然,您可以根据自己的喜好,用按钮或其他视图替换图像。
xxhby3vn7#
这是目前为止最好的答案。
您可以将想要置中的检视放置在
VStack
中,然后将alignment
设定为center
。请确定您也设定了frame(maxWidth: .infinity)
,否则它会将您的检视置中在VStack
中,但VStack
可能不会占据整个屏幕长度,因此您可能无法取得想要的外观。为了使它更简单,可以将它写为
extends
对象的函数然后您可以将其称为视图修饰符,即
每次都对我有效
ax6ht2ek8#
让我提出一个不同的解决方案:
https://gist.github.com/buscarini/122516641cd0ee275dd367786ff2a736
它可以这样使用:
这将使子视图在屏幕上居中(如果合适),如果不合适,则保持原样。它当前使用UISscreen,因此仅在iOS上工作,但您可以轻松地将屏幕或父视图的宽度传递给视图的构造函数,从GeometryReader或其他工具获取它。