ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 10.01.2024
Просмотров: 129
Скачиваний: 1
ToolbarItem(placement: .bottomBar) { Button(action: {}) { Image(systemName: "person.crop.circle") }}ToolbarItemGroup (Группа элементов панели инструментов)ToolbarItemGroup(placement: .confirmationAction) { Image(systemName: "person") Image(systemName: "ellipsis")}ToolbarItemGroup(placement: .bottomBar) { Image(systemName: "person") Spacer() Image(systemName: "ellipsis") Spacer() Image(systemName: "trash")}Окончательный кодNavigationView {Text("My app").toolbar {ToolbarItemGroup(placement: .bottomBar) {Image(systemName: "person")HStack {Image(systemName: "ellipsis")Divider()Image(systemName: "trash").frame(width: 32, height: 32).background(Color.blue).mask(Circle())}}}}Image ViewИзменение размера изображенияImage("Illustration").resizable()Соотношение сторонImage("Illustration").resizable().aspectRatio(contentMode: .fit)Выравнивание кадраВы также можете выровнять изображение в пределах рамки.Image("Illustration").resizable().aspectRatio(contentMode: .fit).frame(width: 200, height: 200, alignment: .center)Safe Area LayoutИгнорировать безопасную зонуДля пользовательского фона обычно применяется ignoreSafeArea. По умолчанию это будет применяться ко всем сторонам: верхней , нижней , ведущей , конечной , всем сразу.Color.blue.ignoresSafeArea()Края безопасной зоныЕсли вы хотите игнорировать только одно ребро, вы можете настроить значение ребра на .top, .bottom, .leading или .trailing.Color.blue.ignoresSafeArea(.all, edges: .top)Избегайте применения к контентуSafe Area очень помогает вам справляться с проблемами пользовательского интерфейса, которые возникают из-за выемки и пробелов индикатора дома. Рекомендуется избегать применения ignoreSafeArea к содержимому. Вместо этого вы должны отделить элементы, которые игнорируют безопасную область, например фоновый элемент.ZStack {Color.blue.ignoresSafeArea()VStack {Text("SwiftUI for iOS 14").bold()}.frame(width: 300, height: 200).background(Color.white)}Max Width and Frame AlignmentТипичным способом выравнивания элементов является использование HStack + Spacer(). Однако для этого может потребоваться слишком много контейнеров, особенно если вы хотите выровнять по левому верхнему углу. Альтернативой является использование модификатора фрейма с maxWidth и выравниванием.Стеки и альтернативы разделителям(StacksandSpacerAlternatives)VStack { HStack { Image(systemName: "xmark") .frame(width: 32, height: 32) .background(Circle().stroke()) Spacer() } Spacer()}.padding()Максимальная ширина и выравнивание(MaxWidth
andAlignment)Используя модификатор кадра с maxWidth и maxHeight , установленными на бесконечность , и выравниванием , установленным на topTrailing , вы получите тот же результат.Image(systemName: "xmark") .frame(width: 32, height: 32) .background(Circle().stroke()) .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing) .padding()Наложение(Overlay)Плавающую кнопку закрытия можно поместить в модификатор наложения, который помещает элемент над содержимым.Rectangle().fill(Color.blue).overlay(Image(systemName: "xmark").frame(width: 32, height: 32).background(Circle().stroke()).frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing).padding())Тени и непрозрачность цветаТени идеально подходят для добавления глубины пользовательскому интерфейсу. Когда ваш текст, кнопки и карточки слишком сильно сливаются с фоном, вы можете использовать тени, чтобы выделить их.Тень по умолчаниюИспользование модификатора тени со значением радиуса даст вам внешний вид тени iOS по умолчанию. Настройте радиус, чтобы сделать его меньше или больше.RoundedRectangle(cornerRadius: 25) .shadow(radius: 10)Пользовательская тень и непрозрачностьЕсли вам нужны дополнительные параметры, вы можете изменить цвет, радиус, значения x и y. Один трюк, который я люблю использовать, это применение непрозрачности к полному цвету. Это даст вам максимальную гибкость для стилей и анимации. .shadow(color: Color.black.opacity(0.3), radius: 20, x: 0, y: 10)Множественные тениЧтобы добавить несколько теней, вы можете использовать несколько модификаторов теней. Убедитесь, что комбинированные тени не слишком сильные, с непрозрачностью менее 50%. Чем светлее ваш фон, тем ниже должен быть этот процент. Мне лично нравится, когда радиус удваивается по оси y..shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2).shadow(color: Color.pink.opacity(0.3), radius: 20, x: 0, y: 10)Тень текстаText("App of the day") .font(.title).bold() .foregroundColor(.white) .shadow(radius: 20)Цветовая теньИспользуя технику «Цвет плюс непрозрачность», вы можете легко создавать тени, используя тот же цвет, что и цвет вашей карты..shadow(color: Color.pink.opacity(0.3), radius: 20, x: 0, y: 10)Теперь у нас есть красивая карточка с хорошо контрастным текстом и свечением с помощью модификатора тени.
VStack {Text("App of the day").font(.title).bold().foregroundColor(.white).shadow(radius: 20)}.frame(width: 300, height: 400).background(Color.pink).cornerRadius(20).shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 2).shadow(color: Color.pink.opacity(0.3), radius: 20, x: 0, y: 10)Mask and Transparency (Маска и прозрачность)Transparency MaskОбрезка особенно хороша для маскировки контента, такого как текст и изображения. В этом примере и содержимое, и фон будут иметь непрозрачность 30%.VStack { Text("Mask and Transparency") .font(.title3).bold()}.padding().background(Color.blue).mask(Color.black.opacity(0.3))Альфа-градиентная маскаОтличная стратегия работы с контентом, который резко обрезается, — это применение непрозрачной градиентной маски. В этом примере мы маскируем содержимое, используя градиент сверху при непрозрачности 100%, вниз при непрозрачности 0%..mask(LinearGradient(gradient: Gradient(colors: [Color.black, Color.black.opacity(0)]), startPoint: .top, endPoint: .bottom))Окончательный макетВ этом примере макета мы применяем маску градиента к обрезанному содержимому, которое прекрасно адаптируется к фону. struct ContentView: View {var body: some View {ZStack {LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1)), Color(#colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1))]), startPoint: .topLeading, endPoint: .bottomTrailing).ignoresSafeArea()VStack {ForEach(0 ..< 5) { item inText("Mask and Transparency").font(.title3).bold().padding(.vertical).frame(maxWidth: .infinity, alignment: .leading)Divider()}}.frame(height: 300, alignment: .top).padding().background(Color.white).mask(LinearGradient(gradient: Gradient(colors: [Color.black, Color.black, Color.black, Color.black.opacity(0)]), startPoint: .top, endPoint: .bottom)).cornerRadius(30).padding()}}}Clip Shape and Smooth Corners (Форма зажима и сглаженные углы)Карточка с закругленными угламиНачнем с простого макета с картой и фоном.ZStack {Color.blue.ignoresSafeArea()VStack {Text("SwiftUI for iOS 14").bold()}.frame(width: 300, height: 200).background(Color.white)}Круг в форме зажимаВы можете использовать clipShape, чтобы замаскировать содержимое любой формы, например Circle или Capsule ..clipShape(Circle())Стиль углового радиуса НепрерывныйЧтобы применить непрерывные закругленные углы, которые повсеместно используются в iOS, используйте фигуру RoundedRectangle ..clipShape(RoundedRectangle(cornerRadius: 25, style: .continuous))Окончательный кодZStack {Color.blue.ignoresSafeArea()VStack {Text("SwiftUI for iOS 14")
.bold()
}
.frame(width: 300, height: 200)
.background(Color.white)
.clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
}
Tab View Pagination (Пагинация просмотра вкладок)
Представление вкладок со стилем страницы
TabView имеет модификатор tabViewStyle, который позволяет создавать горизонтальную прокрутку с разбиением на страницы. В этом макете у нас есть 3 представления. Каждый из этих RoundedRectangle может быть заменен выделенным представлением.
TabView {
RoundedRectangle(cornerRadius: 30).padding()
RoundedRectangle(cornerRadius: 30).padding()
RoundedRectangle(cornerRadius: 30).padding()
}
.tabViewStyle(PageTabViewStyle())
Показать или скрыть точки
Вы можете установить indexDisplayMode для PageTabViewStyle на всегда, автоматически или никогда .
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
TabView {
RoundedRectangle(cornerRadius: 30)
.fill(Color.blue)
.padding()
RoundedRectangle(cornerRadius: 30)
.fill(Color.red)
.padding()
RoundedRectangle(cornerRadius: 30)
.fill(Color.purple)
.padding()
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
Lazy Stacks (Ленивые стеки)
Лучшая производительность
Ленивые стеки обеспечивают большую оптимизацию и лучший пользовательский интерфейс, поскольку элементы будут загружаться быстрее, только когда они видны. Для элементов, которые могут находиться за пределами экрана, следует использовать LazyVStack или LazyHStack вместо HStack и VStack.
ЛенивыйVStack
Чтобы проверить производительность, мы создаем 10 000 строк, расположенных вертикально, с помощью LazyVStack , встроенного в ScrollView. Вы заметите значительно лучшую производительность во время прокрутки и при начальной загрузке по сравнению с использованием VStack.
ScrollView {
LazyVStack(spacing: 16) {
ForEach(0 ..< 10000) { item in
RoundedRectangle(cornerRadius: 20)
.fill(Color.white)
.frame(height: 100)
.shadow(radius: 100)
}
}
.padding()
}
LazyVGrid
Так же, как LazyVStack, вы можете использовать LazyVGrid для загрузки ваших элементов, только когда они находятся в поле зрения.
ScrollView {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
ForEach(0 ..< 10000) { item in
RoundedRectangle(cornerRadius: 20)
.fill(Color.white)
.frame(height: 100)
.shadow(radius: 100)
}
}
.padding()
}
Вид навигации
Оболочка представления навигации
На корневом уровне вашей навигационной структуры вы должны обернуть все внутри навигационного представления. Это автоматически создаст панель навигации. Обратите внимание, что вы должны сделать это только один раз, включая все дочерние представления.