ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 10.01.2024
Просмотров: 53
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
NavigationView {
ScrollView {
RoundedRectangle(cornerRadius: 30)
.frame(height: 1000)
.padding()
}
}
Название навигации
Модификатор .navigationTitle следует применить к первой оболочке внутри NavigationView. Его не следует применять к самому NavigationView. В данном случае я обращаюсь к контейнеру ScrollView.
NavigationView {
ScrollView {
// ...
}
.navigationTitle("Today")
}
Элементы панели навигации
Вы можете добавить кнопки слева или справа от панели навигации с помощью модификатора navigationBarItems .
.navigationBarItems(trailing: Image(systemName: "person.crop.circle"))
НавигацияСсылка
NavigationLink — это то, что позволяет вам перейти на другой экран. Это вызовет анимацию слайдов по умолчанию с помощью панели навигации. Кроме того, вы можете вернуться к предыдущему экрану.
NavigationLink(destination: Text("New View")) {
RoundedRectangle(cornerRadius: 30)
.frame(height: 1000)
.padding()
}
Link (Ссылка на сайт)
Просмотр ссылки
Используя объект Link, мы устанавливаем текст и пункт назначения, который имеет тип URL. Обратите внимание, что URL не может быть опцией, поэтому мы добавляем восклицательный знак в конце.
Link("Design+Code",
destination: URL(string: "https://designcode.io")!)
Настроить ссылку
Подобно тексту, вы можете настроить ссылку, используя модификаторы, такие как шрифт или цвет переднего плана.
Link("Design+Code",
destination: URL(string: "https://designcode.io")!)
.font(.title)
.foregroundColor(.purple)
Значок ссылки
Вы также можете обернуть ссылку вокруг любого элемента, например изображения.
Link(destination: URL(string: "https://designcode.io")!) {
Image(systemName: "link")
.frame(width: 32, height: 32)
.background(Color.blue)
.mask(Circle())
.foregroundColor(.white)
}
Date Picker (Выбор даты)
Выбор даты
Сначала установите дату как состояние. Это средство выбора даты привязано к свойству selectedDate. Пользователи могут выбрать любую дату до текущей даты.
struct ContentView: View {
@State var selectedDate = Date()
var body: some View {
DatePicker("Date", selection: $selectedDate)
}
}
Оболочка выбора даты
Вы можете дополнительно настроить свой пользовательский интерфейс, обернув текст или изображение.
DatePicker(selection: $selectedDate) {
Text("Select a date")
.font(.title3)
}
Диапазон дат
...Date() позволяет пользователю выбрать любую дату до сегодняшнего дня. В качестве альтернативы вы можете установить его начиная с текущей даты с помощью Date()....
DatePicker("Range", selection: $selectedDate, in: ...Date())
Выбор времени
Вместо конкретной даты вы можете разрешить пользователям выбирать часы и минуты.
DatePicker("Time", selection: $selectedDate, displayedComponents: .hourAndMinute)
Дата и время
Вы можете комбинировать дату и час и минуту, используя массив.
DatePicker("Date and time", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])
Дата и время сбора
Мы можем комбинировать дату и время.
DatePicker("Date and Time Picker",
selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])
Графический стиль выбора даты ()
GraphicalDatePickerStyle() позволяет сразу же отобразить полный пользовательский интерфейс календаря вместо отображения модального окна при нажатии.
DatePicker("Select date", selection: $selectedDate)
.datePickerStyle(GraphicalDatePickerStyle())
Статические данные
Что такое статические данные?
Статические данные — это образец набора данных, представленных в структурированном виде, которые вводятся вручную перед внедрением полного динамического решения.
Модель данных
Модель данных позволяет нам быстро ссылаться на значения внутри объекта. Он также содержит типы значений, что дает нам возможность соответствующим образом манипулировать данными. Например, у цвета совсем другие функции, чем у строки.
struct Course: Identifiable {
var id = UUID()
var title: String
var color: Color
}
Образец данных
var courses = [
Course(title: "SwiftUI", color: Color.blue),
Course(title: "UI Design", color: Color.red)
]
Перебор данных
Давайте сначала добавим представление, которое будет содержать все элементы курса. Внутри него мы будем перебирать данные, используя цикл ForEach.
struct ContentView: View {
var body: some View {
List {
ForEach(courses) { item in
Text(item.title)
.padding()
.background(item.color)
.cornerRadius(10)
}
}
}
}
Закрыть пользовательское модальное окно
Если вы хотите показать собственное модальное окно в своем приложении и не хотите использовать модификатор .sheet по умолчанию , вы можете легко создать прослушиватель onTapOutside , чтобы закрыть ваше модальное окно.
Создайте состояние showModal
Давайте начнем с создания нашего состояния showModal , которое будет переключаться между true и false. Начальное значение будет установлено на false, что означает, что модальное окно не будет отображаться по умолчанию.
@State var showModal: Bool = false
Создать ZStack
Затем давайте создадим ZStack с выделенным серым цветом Rectangle() . Поверх прямоугольника покажем модальное окно. В моем случае я создал модальное окно в другом файле с именем SignInView и просто назвал его после Rectangle() . Добавьте .edgesIgnoringSafeArea(.all) , если вы хотите, чтобы прямоугольник проходил над безопасной областью экрана.
ZStack {
Rectangle()
.foregroundColor(Color.black.opacity(0.5))
.edgesIgnoringSafeArea(.all)
SignInView()
}
Добавьте жест onTapGesture
Важная часть — добавить прослушиватель onTapGesture к прямоугольнику . Когда пользователь нажимает на нее (область за пределами модального окна), мы хотим закрыть модальное окно. Поэтому мы можем просто установить для переменной showModal значение false.
.onTapGesture {
showModal = false
}
Добавьте кнопку для отображения модального окна.
Не забудьте добавить свою кнопку, чтобы переключить состояние showModal в true, чтобы вы могли показывать модальное окно, когда пользователь нажимает на него.
Button(action: {
showModal = true
}) {
Text("Sign in")
}
Окончательный код
Наконец, оберните весь ZStack оператором if , чтобы мы показывали модальное окно и Rectangle() , когда для переменной showModal установлено значение true . Окончательный код будет выглядеть примерно так:
Button(action: {
showModal = true
}) {
Text("Sign in")
}
if showModal {
ZStack {
Rectangle()
.foregroundColor(Color.black.opacity(0.5))
.edgesIgnoringSafeArea(.all)
.onTapGesture {
showModal = false
}
SigninView()
}
}
Дата формата
Как отформатировать дату как [день недели], [месяц] [день] , как на изображении ниже?
Форматирование даты
Apple создала класс DateFormatter , облегчающий процесс форматирования дат. Чтобы получить дату в виде строки и отобразить ее как вторник, 29 декабря, начните с создания расширения для даты:
extension Date {
}
Затем создайте функцию внутри этого расширения:
extension Date {
func formatDate() -> String {
let dateFormatter = DateFormatter()
dateFormatter.setLocalizedDateFormatFromTemplate("EEEE, MMM d")
return dateFormatter.string(from: self)
}
}
В приведенном выше коде важной частью является то, что вы помещаете в круглые скобки после. setLocalizedDateFormatFromTemplate . В нашем случае EEEE представляет день недели, MMM — первые три буквы месяца, а d — дату.
Затем в своем представлении просто вызовите расширение getToday() для даты :
let today = Date().formatDate()
И вызовите переменную в тексте , чтобы отобразить ее:
Text(today)
Отформатируйте строку JavaScript в дату SwiftUI
Допустим, вы получили строковую дату после получения данных из Firestore или любого другого API в формате гггг-ММ-дд'Т'ЧЧ:мм:сс.SSSZ (например, 2021-02-01T09:45:00.000+02: 00 ). Чтобы преобразовать его в дату SwiftUI, просто передайте строку даты в функцию ниже:
func formatStringDate(date: String) -> String {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSZ"
let newDate = dateFormatter.date(from: date)
dateFormatter.setLocalizedDateFormatFromTemplate("MMMM d, yyyy")
return dateFormatter.string(from: newDate!)
}
// Output: February 1, 2021
Пользовательские значения по умолчанию
При создании приложения с аутентификацией важно кэшировать данные пользователя. Даже когда пользователь выходит из приложения, данные должны оставаться там до следующего запуска пользователем приложения. Мы не хотим просить пользователя входить в систему каждый раз, когда он открывает приложение, так как это будет плохо для пользователя.
UserDefaults — это класс, который делает именно это. Он постоянно кэширует предпочтения пользователя (например, валюту, которую пользователь предпочитает для приложения магазина), а также любые другие данные, которые вам могут понадобиться (идентификатор пользователя, его адрес электронной почты и т. д.). Он работает как пары ключ-значение и очень прост в реализации.
Как использовать UserDefaults?
В своем представлении добавьте Text . Давайте пока установим его в пустую строку.
var body: some View {
Text("")
}
ЗАПИСЬ В USERDEFAULTS
Добавьте модификатор .onAppear к тексту, чтобы при появлении текста мы хотели установить адрес электронной почты пользователя. Создайте переменную userEmail в модификаторе и установите для нее все, что хотите. Затем вызовите класс UserDefaults со стандартными настройками ( .standard ) и установите ключ электронной почты в только что созданную переменную userEmail .
var body: some View {
Text("")
.onAppear() {
let userEmail = "stephanie@email.com"
UserDefaults.standard.set(userEmail, forKey: "email")
}
}
ЧТЕНИЕ ИЗ USERDEFAULTS
В верхней части того же файла, сразу после того, как вы определили свою структуру , создайте еще одну переменную, где мы будем читать электронное письмо, которое мы сохранили в наших UserDefaults.
let savedEmail = UserDefaults.standard.string(forKey: "email")
Наконец, замените пустые строки в Text на переменную saveEmail .
Text(savedEmail)
Окончательный код
Окончательный код будет выглядеть так:
struct ContentView: View {
let savedEmail = UserDefaults.standard.string(forKey: "email")
var body: some View {
Text(savedEmail)
.padding()
.onAppear() {
let userEmail = "stephanie@email.com"
UserDefaults.standard.set(userEmail, forKey: "email")
}
}
}
Другие примеры
Вы можете установить любой тип переменной в UserDefaults, она не ограничивается строками. Вот еще несколько примеров:
// An integer
let userAge = 40
UserDefaults.standard.set(userAge, forKey: "age")
// A boolean
let userIsLoggedIn = true
UserDefaults.standard.set(userIsLoggedIn, forKey: "isLoggedIn")
// A date
let userLastLoginTime = Date()
UserDefaults.standard.set(userLastLoginTime, forKey: "lastLoginTime")
Примечание . Не храните слишком много данных в UserDefaults. Храните только важные, так как слишком много данных в UserDefaults может использовать слишком много памяти, а первая загрузка может быть дольше каждый раз, когда пользователь запускает приложение.
Ссылка из текста
Если вы хотите добавить ссылку на текст в SwiftUI, вам нужно будет вызвать модификатор .onTapGesture , а также UIApplication.shared.open .
Одна ссылка
Например, если пользователь нажимает на следующий текст, мы хотим, чтобы он перешел на веб-сайт Design+Code. Итак, мы сделаем что-то вроде этого:
Text("Visit Design+Code")
.onTapGesture {
UIApplication.shared.open(URL(string: "https://designcode.io")!, options: [:])
}
Несколько ссылок
Если у вас есть длинный текст с несколькими ссылками, просто оберните их в HStack :
HStack {
Text("You agree to our")
Text("Terms")
.onTapGesture {
UIApplication.shared.open(URL(string: "https://designcode.io/terms")!)
}
Text("and")
Text("Privacy policy")
.onTapGesture {
UIApplication.shared.open(URL(string: "https://designcode.io/privacy")!)
}
Text(".")
}