如何在 SwiftUI 中使一组按钮宽度相同

Question

我有一组三个按钮用于媒体控制（向后跳转、play/pause、向前跳转）。当我按下播放按钮时，"play" 图标被 "pause" 图标取代，space。因为我没有定义任何大小限制，所以暂停按钮变小了一点，导致其他两个按钮移动了一点。

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

简化代码：

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()
}

Answer 1

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

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

Answer 2

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

你也可以把条件表达式包裹在一个VStack中，然后给VStack加上一个frame，让它变成一个固定的宽度。您可能希望将图像居中放置在 VStack 中。

play.circle 和 pause.circle 看起来大小差不多，或者你可以使用播放暂停图像。

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

如何在 SwiftUI 中使一组按钮宽度相同

How to make group of buttons same width in SwiftUI

button

swiftui