Странный внутренний вид в кнопках SwiftUI на Watch

Question

Я только начинаю с разработки часов и SwiftUI и думал, что начну с простого экрана входа в систему. Я сделал две кнопки двух разных стилей. Странно то, что мои кнопки имеют странный красный внутренний вид, и я не знаю почему.

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Button( "Login")
            {            
            }
            .accentColor( .white)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.red)
            .cornerRadius( 5.0)

            Button( "Sign Up")
            {
            }
            .accentColor( .red)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.white)
            .cornerRadius( 5.0)
        }
    }
}

Может кто-нибудь сказать мне, что здесь происходит?

Также, если кто-то имеет репутацию 1500, он может создать тег WatchOS6?

Обновление: на iPhone это работает лучше, чем на Watch, кнопки работают на обоих устройствах по-разному. Как отмечает @MarkT, вам нужно начать с простого стиля кнопки. Проблема заключается в том, что он останавливает использование ваших собственных стилей кнопок.

Answer 1

Вы только определяете фон за кнопкой "по умолчанию", поэтому он выглядит таким зашнурованным.

Поможет изменить стиль кнопки на "обычный" и применить радиус угла к фону. Конечно, вы должны отрегулировать размер фона, используя отступ для фрейма...

       Button( "Login")
            {
            }
            .buttonStyle(.plain)
            .padding(.horizontal, 60)
            .padding(.vertical, 10)
            .background(
                   Color.red
                      .cornerRadius( 5.0))

Answer 2

Это сработало для меня

       HStack {
        Button("Login")
            {
            }
        .buttonStyle(BorderedButtonStyle(tint: .clear))
        .foregroundColor(.white)
    }
    .background(Color.red)
    .cornerRadius(5)

если он в списке, попробуйте и это

       .listRowPlatterColor(Color.clear)

Answer 3

Я считаю, что это результат использования accentColor чтобы определить цвет вашего текста для кнопки.

Вы можете заменить это foregroundColor и получите тот же цвет текста, но, надеюсь, без странного рисунка, который вы сейчас испытываете.

С изменениями ваш код будет выглядеть так:

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Button( "Login")
            {            
            }
            .foregroundColor( .white)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.red)
            .cornerRadius( 5.0)

            Button( "Sign Up")
            {
            }
            .foregroundColor( .red)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.white)
            .cornerRadius( 5.0)
        }
    }
}

К сожалению, это не полностью решает проблему. Как вы можете видеть, мы идем из этого:

к этому:

Что не идеально.

Answer 4

Согласно этой документации вы должны установить радиус на 22 точки (или 9 для прокрутки).