我有一个HStack:
struct BottomList: View {
var body: some View {
HStack() {
ForEach(navData) { item in
NavItem(image: item.icon, title: item.title)
}
}
}
}
如何完美地将其内容居中,并自动填充整个宽度?
FYI就像Bootstrap CSS class .justify-content-around
7条答案
按热度按时间z4bn682m1#
frame
布局修饰符(.infinity
为maxWidth
参数)可用于实现此目的,而无需额外的Shape
视图。cyvaqqii2#
各种
*Stack
类型将尝试缩小到最小的大小,以包含其子视图。如果子视图具有理想大小,则*Stack
将不会扩展以填满屏幕。这可以通过将每个孩子放在ZStack
中的一个清晰的Rectangle
的顶部来克服,因为Shape
会尽可能地扩展。一种方便的方法是通过View
上的扩展:你可以这样调用它:
您可以根据需要调整
HStack
上的间距。yvfmudvl3#
我在每一项后面都插入了
Spacer()
...但对于最后一项,不要****添加Spacer()
:即使项目宽度不同,也会均匀间隔的示例列表:
.frame(maxWidth: .infinity)
并不适用于所有情况:当涉及到具有不同宽度的项目时,它对我不起作用)*k2fxgqgv4#
如果项目是全宽兼容的,它将自动完成,您可以在间隔符之间 Package 项目以实现这一点:
所以你可以在一个循环中使用它,比如:
qgzx9mmu5#
您也可以在堆栈中使用
spacing
。即输出结果如下所示...
kdfy810k6#
如果你的数组有重复的值,使用array.indices来省略最后一个元素后面的间隔符。
v8wbuo2f7#
我对已接受的答案不满意,因为它们在
Hstack
的前导和尾随两侧留下了额外的“伪填充这是我的解决方案的一个例子:
结果是: