СПРАВОЧНИК SWIFTUI

Основные возможности SwiftUI

Справочник
2

UI-элементы

View, предназначенные для отображения различных UI-элементов

Text

Отображает одну или несколько строк текста, доступного только для чтения.

Официальная документация

Создание и использование

Text("Hello World")

Text("Hello").bold() + Text(" ") + Text("World!")

Оформление

Text("Hello, world!")
    .font(.headline)
		.fontWeight(.bold)
    .italic()
    .underline()
    .lineLimit(2)
    .padding(20)

Label

Компонует изображение и текст в единый графический элемент. Прекрасно подходит для пунктов меню.

Официальная документация

Создание и использование

// С использование SF Symbol
Label("Add", image: "therock")

// C использование собственного изображения
Label("Edit", systemImage: "pencil.circle")

Оформление

Label("Edit", systemImage: "pencil.circle")
	// выбор стиля (иконка, текст или все вместе)
	.labelStyle(.titleOnly)
	// размер изображения
	.imageScale(.large)
Вы можете создать собственный стиль оформления на основе протокола LabelStyle 
struct ShadowLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .shadow(color: .black, radius: 3, x: 5, y: 5)
    }
}

// label с тенью
Label("Edit", systemImage: "pencil.circle")
	.labelStyle(ShadowLabelStyle())

TextField

Текстовое поле

Официальная документация

Создание и использование

Создается State-параметр, который будет хранить редактируемый текст.

@State private var text: String = "Редактируемый текст"

TextField принимает Binding-параметр.

TextField("Placeholder", text: $text)

Доступен вариант с наблюдателями onEditingChanged и onCommit

TextField("Placeholder",
      text: $text,
      onEditingChanged: { isEditingBegin in
            if isEditingBegin {
                print("Редактирование начало")
            } else {
                print("Редактирование окончено")
            }
        },
      onCommit: {
            print("Нажата кнопка Return")
        })
Привязка нетекстового параметра

С помощью аргумента formatter в качестве связанного параметра может выступать параметр произвольного типа.

// Привязка текстового поля к параметру типа Date
@State private var date = Date()

// ...

static var df: DateFormatter {
    let df = DateFormatter()
    df.dateStyle = .short
    return df
}

// ...

TextField(
    "Date",
    value: $date,
    formatter: Self.df,
    onEditingChanged: { _ in },
    onCommit: { })

Оформление

Для применения универсального стиля оформления используется модификатор textFieldStyle(_:). При этом вам доступны несколько встроенных стилей:

  • DefaultTextFieldStyle()
  • PlainTextFieldStyle()
  • RoundedBorderTextFieldStyle()
  • SquareBorderTextFieldStyle()
// Применение стиля
TextField("Placeholder", text: $text)
    .textFieldStyle(RoundedBorderTextFieldStyle())

Так же вы можете создать и применить собственный универсальный стиль на основе протокола TextFieldStyle.

struct MyTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField) -> some View {
        configuration
            .padding(10)
            .background(Color.green)
            .cornerRadius(20)
            .shadow(color: .gray, radius: 10)
    }
}
			
TextField("Placeholder", text: $text)
    .textFieldStyle(MyTextFieldStyle())

TextEditor

Поле для редактирования длинного многострочного текста

Официальная документация

Создание и использование

Создается State-параметр, который будет хранить редактируемый текст.

@State private var text: String = "Редактируемый текст"

TextEditor принимает Binding-параметр.

TextEditor(text: $text)

Оформление

// Применение стиля
TextField("Placeholder", text: $text)
    .foregroundColor(Color.gray)
    .font(.custom("HelveticaNeue", size: 13))
    .lineSpacing(5)

Фигуры

View, предназначенные для отображения различных фигур

Circle

Круг, центрированный на середине родительского View

Официальная документация

Создание и использование

Circle()

Circle()
	.frame(width: 200, height: 150)

Оформление

// закрашенный круг
Circle()
	// для изменения цвета можно использовать fill или foregroundColor
	.fill(Color.blue)
	// или
	.foregroundColor(.pink)

// круг с обводкой
Circle()
	.stroke()
	// или
	.stroke(Color.red, lineWidth: 20)

// сектор круга
Circle()
	.trim(from: 0.2, to 1.0)

Ellipse

Эллипс, заполняющий родительское View

Официальная документация

Создание и использование

Ellipse()

Ellipse()
	.frame(width: 200, height: 150)

Оформление

// закрашенный эллипс
Ellipse()
	// для изменения цвета можно использовать fill или foregroundColor
	.fill(Color.blue)
	// или
	.foregroundColor(.pink)

// эллипс с обводкой
Ellipse()
	.stroke()
	// или
	.stroke(Color.red, lineWidth: 20)

// сектор эллипса
Ellipse()
	.trim(from: 0.2, to 1.0)

Capsule

View в виде капсулы, заполняющее родительское View

Официальная документация

Создание и использование

Capsule()

Capsule(style: .circular)

Capsule(style: .continuous)
	.frame(width: 200, height: 150)

Оформление

// закрашенная капсула
Capsule()
	// для изменения цвета можно использовать fill или foregroundColor
	.fill(Color.blue)
	// или
	.foregroundColor(.pink)

// капсула с обводкой
Capsule()
	.stroke()
	// или
	.stroke(Color.red, lineWidth: 20)

// сектор капсулы
Capsule()
	.trim(from: 0.2, to 1.0)

Rectangle

Прямоугольник, заполняющий родительское View

Официальная документация

Создание и использование

Rectangle()

Rectangle()
	.frame(width: 200, height: 150)

Оформление

// закрашенный прямоугольник
Rectangle()
	// для изменения цвета можно использовать fill или foregroundColor
	.fill(Color.blue)
	// или
	.foregroundColor(.pink)

// прямоугольник с обводкой
Rectangle()
	.stroke()
	// или
	.stroke(Color.red, lineWidth: 20)

RoundedRectangle

Прямоугольник с закругленными краями, заполняющий родительское View

Официальная документация

Создание и использование

RoundedRectangle(cornerRadius: 15)

RoundedRectangle(cornerRadius: 15, style:)

RoundedRectangle(cornerSize: CGSize(width: 10, height: 5), style: .circular)

RoundedRectangle(cornerRadius: 15, style: .continuous)
	.frame(width: 200, height: 150)

Оформление

// закрашенный прямоугольник
RoundedRectangle(cornerRadius: 15)
	// для изменения цвета можно использовать fill или foregroundColor
	.fill(Color.blue)
	// или
	.foregroundColor(.pink)

// прямоугольник с обводкой
RoundedRectangle(cornerRadius: 15)
	.stroke()
	// или
	.stroke(Color.red, lineWidth: 20)

RoundedRectangle(cornerRadius: 15)
	.trim(from: 0.2, to: 1.0)

Верстка

Вьюшки, предназначенные для верстки и размещения других вью.

HStack

Вью, группирующее дочерние вью в горизонтальный стек.

Официальная документация

Создание и использование

HStack {}

HStack(spacing: 20) {}

HStack(alignment: .bottom, spacing: 20) {}

HStack {
    Rectangle()
        .fill(.red)
        .frame(width: 120, height: 120)
    Rectangle()
        .fill(.green)
        .frame(width: 110, height: 110)
}

Оформление

HStack(alignment: .center, spacing: 20) {
    Text("Hello, World!")
        .fontWeight(.bold)
    Text("This is description")
}
.padding()
.font(.title)
.background(.yellow)
.cornerRadius(20)

Spacer

Гибкое вью, занимающее все доступное пространство по основной оси стэка или по обеим осям, если не находится в стеке.

Официальная документация

Создание и использование

Spacer()

// С минимальной длиной
Spacer(minLength: 50)

// В составе стека
// Будет растягивать стек на всю доступную ширину
HStack(spacing: 0) {
    Image(systemName: "xmark")
    Spacer()
    Image(systemName: "gear")
}
.padding()

Оформление

Spacer()
    .background(.red)
    .frame(height: 20)

Добавить комментарий