Как сделать группу кнопок одинаковой ширины в SwiftUI

У меня есть группа из трех кнопок для управления мультимедиа (переход назад, воспроизведение/пауза, переход вперед). Когда я нажимаю кнопку воспроизведения, значок «воспроизведение» заменяется значком «пауза», который занимает немного меньше места. Поскольку я не определил никаких ограничений по размеру, кнопка паузы становится немного меньше и заставляет две другие немного двигаться.

Как я могу сделать все три кнопки одинаковой ширины без каких-либо жестких ограничений, поскольку в настоящее время кнопки имеют идеальный размер на всех разных устройствах?

Упрощенный код:

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()
}
5 дизайнов темных кнопок с использованием HTML и CSS
5 дизайнов темных кнопок с использованием HTML и CSS
Здесь представлены пять дизайнов темных кнопок с кодом с использованием HTML и CSS:
3
0
1 134
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я делаю что-то подобное и с аудиоплеером. Мой метод заключается в том, чтобы просто поместить невидимый (.opacity(0.0)) дубликат самого большого представления в ZStack, чтобы размер не прыгал.

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

Я также много использовал его с UILabels. Например, если у вас есть часы/бегущая строка, используйте невидимый UILabel с .text = "00:00:00" для макета и поместите свой фактический контент поверх него (начальный/конечный по мере необходимости). Теперь макет не будет меняться с каждым тиком. Однако со SwiftUI гораздо проще!

arsenius 24.07.2019 06:41

Если вы знаете разницу в размере, вы можете дополнять изображения разными суммами. то есть Image(systemName: "bigger").padding(.horizontal, 1) и Image(systemName: "smaller").padding(.horizontal, 5).

Вы также можете обернуть условное выражение в VStack, а затем применить фрейм к VStack, чтобы он стал фиксированной ширины. Вероятно, вы захотите центрировать изображения в VStack.

Кажется, что play.circle и pause.circle имеют одинаковый размер, или вы можете использовать изображение playpause.

Наконец, вы можете экспортировать символы с помощью приложения SF Symbols и исправить их.

Другие вопросы по теме