Используйте @ViewBuilder для создания настраиваемого представления вкладки
@ViewBuilder
Начните с создания структуры для контейнера, который будет содержать наши вкладки. Структура будет иметь тип View. Чтобы передать вкладки в наш контейнер, нам нужен параметр, содержащий наши вкладки. Этот параметр будет содержимым. Он относится к типу Content, который соответствует View. Обычно вкладки имеют изображения значков и могут не иметь заголовков. Из-за этого мы можем сделать наши заголовки необязательными. Создайте init и убедитесь, что перед параметром содержимого указан атрибут параметра @ViewBuilder
. Это позволит нам закрыть некоторые дочерние представления.
Модификаторы содержимого
У нас будут все наши вкладки внутри HStack
. Создайте HStack
и добавьте к нему нашу константу содержимого. Отрегулируйте рамку, чтобы покрыть всю ширину нашего родительского представления, добавив GeometryReader
и используя его значение ширины геометрического размера. Дайте HStack
следующие модификаторы:
offset
: используется для перемещения между вкладками путем смещения x.animation
: используйте интерактивную пружинную анимацию, чтобы вкладки возвращались в исходное положение, когда жест смахивания недостаточно силен.gesture
: используйтеDragGesture
, чтобы переключаться между вкладками. Создайте состояние жеста и индексируйте переменные. Используйте модификаторыupdating
иonEnded
DragGesture
, чтобы получить положение смахивания и смещение содержимого.
Если вы хотите, чтобы жесты смахивания работали слабее, добавьте переменную weakGesture
и настройте ее значение по своему усмотрению. Затем добавьте его к константе offset
.
Вкладки изображений и заголовков
Вставьте HStack
содержания внутри нашего GeometryReader
в VStack
. Под HStack
нашего содержания добавьте еще HStack
для кнопок вкладок. Используйте ForEach
, чтобы перебирать все изображения и добавлять их к кнопкам. Убедитесь, что заголовки не пустые, и добавьте их к той же кнопке внутри VStack
. Используйте Spacer()
, чтобы добавить динамический интервал между кнопками.
ContentView
В нашем ContentView
мы можем попробовать наш TabsContainer
. Создавайте заголовки и изображения для передачи в наш TabsContainer
. Возьмите ZStack
и выровняйте его содержимое по низу. Используйте цвет, чтобы добавить к ZStack
. Это гарантирует, что наш ZStack
будет таким же широким и высоким, как и наш родительский вид. Создайте свои структуры вкладок и добавьте их в наш контейнер. В этом уроке у меня есть четыре RoundedRectangle
формы в качестве содержимого.
Все сделано! Спасибо за прочтение.