ios 如何在Xcode15用户界面中以网格布局排列计算器按钮

cotxawn7  于 11个月前  发布在  iOS
关注(0)|答案(1)|浏览(114)

我在Xcode 15中创建了一个StackView,使用ViewController将计算器按钮排列在网格中,但我遇到了一个问题,按钮大小自动缩小。这使我无法均匀地水平分布它们。
我从一个教程网站上了解到,将分布设置为“相等填充”将允许相等的间距。我尝试了一下,但如图所示,按钮最终缩小了。(注意:我没有设置任何约束。)(注意:我已经附上了预期的最终布局和当前状态的图像。)
是否需要任何额外的设置来整齐地排列按钮?如果你能提出一个不涉及使用Swift代码的解决方案,我将不胜感激!
我想做的是:
x1c 0d1x的数据
结果:


tnkciper

tnkciper1#

为了让你开始...
开始添加顶部“显示”标签,约束Top/Leading/Trailing:
x1c 0d1x的数据
接下来,添加第一“行”的4个按钮,如下所示-确切的大小/位置并不重要:



选择4个按钮并在堆栈视图中嵌入(水平):



你可以看到它们“收缩”了.这是因为UIStackView * 根据它们的内在大小来 * 排列 * 它的子视图。由于我们还没有对大小做任何具体的处理,这就是我们得到的结果。
因此,下一步是创建另外四个“按钮行”-我们可以使用复制/粘贴或复制-并将这五个按钮行嵌入到垂直堆栈视图中:



注意:目前,我们在最下面一行使用两个“0”按钮...我们将在最后一步修复它。
选择每个“行”堆栈视图并设置以下属性:

选择保存行的垂直堆栈视图并设置以下属性:

现在,约束垂直堆栈视图以填充视图:

我们现在有了这样的布局

让我们给“显示标签”给予一个高度约束,这样它就有一个小的顶部/底部填充:

然后我们可以将视图和标签的背景颜色设置为黑色:

底部的“行”不是4按钮,所以我们需要解决这个问题。

  • 选择两个“0”按钮,并将它们嵌入到堆栈视图中
  • 选择“.”和“=”按钮,并将它们嵌入到堆栈视图中
  • 在两个新堆栈视图中的每一个上设置分布:相等填充
  • 删除其中一个“0”按钮

我们得到这个:

给予一个尝试.如果你遇到麻烦,这里是该故事板的源代码,所以你可以检查它:https://pastebin.com/BKQgSr9g

相关问题