Используйте @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 формы в качестве содержимого.

Все сделано! Спасибо за прочтение.