Узнайте, как использовать новый компонент ColorPicker SwiftUI

Во время WWDC 2020 на этой неделе Apple объявила о нескольких новых компонентах, которые появятся в UIKit и SwiftUI. Один из них - это совершенно новый родной палитра цветов. В прошлом разработчикам приходилось внедрять собственные средства выбора цвета, и несколько вариантов с открытым исходным кодом также доступны на GitHub.

Однако теперь разработчики могут использовать SwiftUI ColorPicker или UIKit UIColorWell, чтобы легко управлять выбором цвета. Этот новый компонент выбора цвета также предлагает различные способы выбора цвета.

Давайте напишем код, чтобы увидеть, насколько просто использовать ColorPicker в SwiftUI *.

* Примечание. На момент публикации этой статьи Xcode 12 и SwiftUI 2.0 находятся в стадии бета-тестирования.

Убедитесь, что на вашем компьютере установлен Xcode 12. Откройте его и создайте новый проект приложения. Использовать ColorPicker очень просто, все, что вам нужно сделать, это добавить ColorPicker в View, инициализировав его заголовком и Color Binding.

В приведенном выше коде у нас есть selectedColor в качестве переменной, которая будет отслеживать текущий выбранный цвет, начиная с черного. У нас также есть текстовый компонент, который использует selectedColor для установки цвета переднего плана; это означает, что при выборе цвета в палитре цветов цвет текста также изменится. Наконец, у нас есть ColorPicker с заголовком «Выберите цвет» и привязкой к selectedColor. Эта привязка гарантирует, что всякий раз, когда выбирается новый цвет, значение selectedColor обновляется.

Если вы запустите свое приложение, вы должны увидеть что-то вроде этого:

ColorPicker также имеет селектор цвета «пипетка», который позволяет выбирать цвет из любого места на экране. Мы можем добавить изображение к нашему представлению, чтобы проверить его.

Image("dog").resizable().scaledToFit().frame(width: 450, height: 550)

Вот и все! Спасибо за прочтение. Обязательно посмотрите Видео WWDC от ​​Apple, в котором больше говорится о средствах выбора, меню и действиях.