如何在 SwiftUI 中使按钮组的宽度相同答案

【问题标题】：How to make group of buttons same width in SwiftUI如何在 SwiftUI 中使按钮组的宽度相同
【发布时间】：2019-12-01 18:13:33
【问题描述】：

我有一组三个用于媒体控制的按钮（后退、播放/暂停、前进）。当我按下播放按钮时，“播放”图标被“暂停”图标取代，这占用了更少的空间。由于我没有定义任何大小限制，暂停按钮会变小一点，并导致其他两个移动一点。

如何在不定义任何硬约束的情况下使所有三个按钮的宽度相同，因为目前这些按钮在所有不同设备上都具有完美的尺寸？

简化代码：

HStack {
    Button(action: { }) {
        Image(systemName: "backward.end")
    }.padding().
    viewModel.isPlaying ? Button(action: { }) {
        Image(systemName: "pause")
    }.padding() : Button(action: { }) {
        Image(systemName: "play")
    }.padding()
    Button(action: { }) {
        Image(systemName: "forward.end")
    }.padding()
}

【问题讨论】：

标签： button swiftui

【解决方案1】：

我也在用音频播放器做类似的事情。我的方法是在 ZStack 中放置最大视图的不可见 (.opacity(0.0)) 副本，这样大小就不会跳跃。

ZStack {
  Image(systemName: "larger-button-image")
    .opacity(0.0)
    Image(systemName: "smaller-button-image")  
}

【讨论】：

我在 UILabels 中也经常使用它。例如，如果您有一个时钟/报价器，请使用带有 .text = "00:00:00" 的不可见 UILabel 进行布局，并将您的实际内容放在它上面（适当的前导/尾随）。现在布局不会随着每一个刻度而改变。不过使用 SwiftUI 会更容易！

【解决方案2】：

如果您知道大小的差异，那么您可以将图像填充不同的数量即Image(systemName: "bigger").padding(.horizontal, 1) 和Image(systemName: "smaller").padding(.horizontal, 5)。

您还可以将条件表达式包装在 VStack 中，然后将框架应用于 VStack，使其成为固定宽度。您可能希望将图像在 VStack 中居中。

play.circle 和 pause.circle 看起来更像是相同的大小，或者您可以使用 playpause 图像。

最后，您可以使用 SF Symbols 应用导出符号并修复它们。

【讨论】：