HStack с символами SF Изображение не выровнено по центру

Question

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

struct ContentView : View {
var body: some View {
    HStack(alignment: .center, spacing: 10.0) {
        Image(systemName: "cloud.sun")
        Image(systemName: "cloud")
        Image(systemName: "cloud.bolt")
        Text("Text")
        }.font(.title)
    }
}

Но, как вы можете видеть ниже, первый и последний символ не центрированы.Я что-то упустил, или это ошибка?

Ура!

Answer 1

Это то, что происходит.

Размеры Image не меняются.

Похоже, они не знают о своем собственном размере контента или, возможно, сообщают о неправильном значении.

Чтобы исправить это :

struct ContentView : View {
    var body: some View {
        HStack(alignment: .center, spacing: 10.0) {
            Image(systemName: "cloud.sun")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .background(Color.red)
            Image(systemName: "cloud")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .background(Color.yellow)
            Image(systemName: "cloud.bolt")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .background(Color.pink)
            Text("Text").background(Color.green)
        }
        .frame(width: 250, height: 50)
        .background(Color.gray)
        .font(.title)

    }
}

... сделайте размер Images изменяемым, а также убедитесь, что соотношение сторон установлено на .fit, иначе они растянутся.

Установите также рамку на HStack или она расширится, чтобы заполнить весь экран.

@ MartinR предложил еще лучшее решение - создание изображений с помощью UIImage - см. Его комментарий ниже.

struct ContentView : View {

    var body: some View {
        HStack {
            Image(uiImage: UIImage(systemName: "cloud.sun")!)
                .background(Color.red)
            Image(uiImage: UIImage(systemName: "cloud")!)
                .background(Color.yellow)
            Image(uiImage: UIImage(systemName: "cloud.bolt")!)
                .background(Color.pink)
            Text("Text").background(Color.green)
        }
        .background(Color.gray)
        .font(.title)

    }

}

выход