SwiftUI RectangularFullView — выравнивание вложенных стеков

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

Изображение сложности с неправильным выравниванием

Стеки выравниваются по центру с динамической шириной. Текст также выравнивается по центру. Я пробовал редактировать текст с помощью .multilineTextAlignment, но это ничего не изменило.

Я смоделировал ожидаемое выравнивание ниже:

Ожидаемое выравнивание сложности

Красное поле — это HStack с изображением, которое всегда 60x56 pixels. Я хочу, чтобы это было выровнено по левому краю, что, похоже, работает до сих пор. Я также хочу, чтобы он был центрирован по вертикали, но я не уверен, что это вообще возможно.

Розовая рамка — это VStack текста. Этот текст должен быть выровнен по левому краю, но я не могу заставить это работать.

Синяя рамка — это объемлющая HStack

Вот мой код для этого усложнения (я только что понял, что дал код шаблона с изображениями реального примера, но он должен быть понятен):

struct ComplicationViewTemplate: View {

var body: some View {
    HStack {
        HStack {
            Image("0i")
                .aspectRatio(contentMode: .fit)
        }.frame(width: 60, height: 56, alignment: .leading)
        VStack {
            Text("Egg")
                    .font(.body)
                    .bold()
                Text("0 steps")
                    .font(.caption)
                Text("Level 01")
                    .font(.caption)
        }
    }
}
}

Если это поможет, поскольку это приложение предназначено только для меня, оно будет доступно только на 44-мм часах Series 5, поэтому элементы не должны быть динамическими для часов других размеров.

Резюме вопросов:

  1. Можно ли вертикально центрировать HStack внутри другого HStack
  2. Можно ли выровнять текст по левому краю внутри VStack

Спасибо за любую помощь!


person impo    schedule 08.04.2021    source источник
comment
Не забывайте Spacer. Для внешнего HStack это выглядит как [Spacer, Image, Text]. Выравнивание по умолчанию должно быть .center, но вы можете точно настроить отношения с помощью .alignmentGuide.   -  person Cenk Bilgen    schedule 08.04.2021
comment
Спасибо @CenkBilgen, я не знал, что Spacer существует. Надеюсь, если все по умолчанию будет .center, это также может выровнять все по вертикали. Не знаете ли вы, есть ли документация Apple, в которой перечислены все элементы, которые я могу поместить в представление? У меня большие проблемы с поиском ресурса об элементах в представлении   -  person impo    schedule 09.04.2021


Ответы (1)


Мне удалось заставить это работать:

struct ComplicationViewTemplate: View {
    var body: some View {
        HStack {
            HStack {
                Image("14gi")
                    .interpolation(.none)
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 60, height: 56, alignment: .leading)
            }.frame(width: 60, height: 56, alignment: .leading)
            Spacer(minLength: 10)
            VStack(alignment: .leading) {
                Text("Pikachu").bold().font(.body).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
                Text("000000 steps").font(.caption).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
                Text("Level 00").font(.caption).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
            }.frame(width: 110, alignment: .leading)
        }
    }
}

Вот как выглядит результат (я также немного обновил шаблон):

Окончательное представление сложности

person impo    schedule 09.04.2021