Использование Spacer, padding, GeometryReader и нормализации

Вы можете использовать padding() и Spacer() для создания некоторого промежутка между видами. Это может хорошо работать, когда у вас не так много вложенных представлений, которые нужно настраивать внутри приложения.

Заполнение

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

Распорка

Spacer добавляет гибкий интервал, который расширяется вдоль оси контейнера. Внутри HStack интервал будет горизонтальным. Внутри VStack он будет вертикальным. Если Spacer не содержится в стеке, система добавит интервал к обеим осям.

Теперь давайте рассмотрим более сложный вид, добавив несколько графиков.

Круговой график

Гистограмма

GeometryReader

Теперь мы видим, что мы зависим от множества постоянных чисел. Spacer() и padding() будет недостаточно. Зафиксируем круговой график. Сначала удалите прокладку из RoundedRectangle и добавьте ее в ZStack как для круговой, так и для гистограммы.

Отрегулируйте ширину рамки для обоих кругов так, чтобы она покрывала только 40% обзора:

Для гистограммы давайте изменим ширину рамки, чтобы она занимала 45%, и высоту, чтобы она занимала 80% обзора на обеих капсулах:

Убираем промежуток между планками:

Нам нужно нормализовать значение высоты для второй капсулы, чтобы она могла принимать любое случайное значение, не влияя на вид:

Мы можем добавить представления в наш ContentView и посмотреть, как все выглядит в нашем приложении:

Заключение

Надеюсь, это было полезно. Спасибо за прочтение!