Нарисуйте логотип Apple в виде формы SwiftUI и отобразите оставшееся время под ним.
Сначала я собираюсь воссоздать логотип Apple в виде пути SwiftUI. Чтобы упростить рисование пути, я создал объект, который автоматически создает все необходимые точки.
Он создается путем передачи значений maxX и maxY кадра, в котором он рисуется, поскольку все точки рисуются относительно этих максимальных значений.
Эти точки были выбраны мной в качестве оценок, поэтому вы можете не согласиться с тем, как получается общая форма.
Если вы хотите переместить какие-либо точки на фигуре, вы можете сделать это здесь, убедившись, что умножили на maxX или maxY, чтобы получить относительное положение, а не жестко заданное. Форма может быть любого размера, поэтому фиксированное положение потенциально может находиться за пределами фрейма и не масштабироваться.
Умножение на максимум в любом направлении делает значение 1 равным этому максимуму.
Контрольные точки, которые указывают кривым, где сгибаться, могут быть ниже нуля или выше 1, так как они на самом деле не рисуются как часть формы.
Но точки, которые вы хотите оставить в кадре, должны быть между нулем и 1 при умножении на максимум.
Давайте превратим эти точки в форму!
У этой формы еще нет обводки или заливки, но это нормально.
Таймер обратного отсчета
Цифры будут отображаться с меткой под ними в прямоугольнике со скругленными углами.
Это будет повторно использоваться для дней, часов, минут и секунд, поэтому оно должно быть отдельным представлением.
Теперь я могу объединить 4 из них в LazyVGrid, который отобразит их как 2 строки по 2. Столбцы являются гибкими, поэтому они могут изменять свой размер, чтобы заполнить доступное пространство.
Здесь также есть таймер, который будет подсчитывать, сколько времени осталось каждую секунду.
Теперь мы можем объединить представления в ZStack.
Есть фон AngularGradient, так как легче увидеть, что Material.ultraThinMaterial используется в качестве заливки для AppleLogoShape. Это означает, что он размывает все, что находится под ним, но вы все равно можете видеть сквозь него. Если вместо этого вы используете однотонный фон, вы не сможете хорошо увидеть эффект размытия.
Конечно, вам не нужно использовать полупрозрачный материал в качестве заливки для AppleLogoShape. На самом деле вы можете вызвать .fill() без параметров, и foregroundColor, который вы впоследствии примените, будет цветом фигуры.
Вы также можете использовать модификатор .stroke(lineWidth: 5) , чтобы нарисовать контур фигуры, но в настоящее время невозможно одновременно использовать и обводку, и заливку.
Если вам нужны и обводка, и заливка, вы, к сожалению, застряли с отдельными экземплярами формы с обводкой и заливкой в ZStack.
Кроме того, вы можете добавить обведенный экземпляр фигуры в качестве наложения поверх заполненного экземпляра.
Want to Connect? This story was also published on my Substack channel: Typesafely.
