Поваренная книга SwiftUI: кнопки — Часть 1

Кнопки — важнейшие компоненты любого пользовательского интерфейса, позволяющие пользователям взаимодействовать и инициировать действия в приложении. В SwiftUI создание кнопки очень простое и настраиваемое.

Чтобы создать кнопку, просто используйте представление Button и передайте в качестве параметра желаемый ярлык. Вот пример:

struct ContentView: View {
  var body: some View {
    Button("Click me!") {
      // Action to perform when button is tapped
    }
  }
}

Ваш предварительный просмотр должен выглядеть следующим образом:

Используйте представление Button для создания кнопки в SwiftUI.

В этом примере мы создали кнопку с надписью Click me! и назначили действие, которое будет выполняться при нажатии на кнопку. Действие задается с помощью замыкания, которое заключено в фигурные скобки {}.

Вы можете настроить внешний вид кнопки с помощью таких модификаторов, как font, padding и foregroundColor. Вот пример:

struct ContentView: View {
  var body: some View {
    Button("Submit") {
      // Action to perform when button is tapped
    }
    .font(.headline)
    .padding()
    .foregroundColor(.white)
    .background(.blue)
    .cornerRadius(5)
  }
}

В этом случае предварительный просмотр будет таким:

В SwiftUI кнопки можно стилизовать с помощью модификаторов вида.

В этом примере вы настраиваете кнопку, устанавливая шрифт .headline, добавляя отступы, устанавливая цвет шрифта белым, устанавливая цвет фона синим и закругляя углы с помощью модификатора cornerRadius.

В целом, создавать кнопки в SwiftUI быстро и просто, а возможность настраивать их внешний вид позволяет создать уникальный и последовательный пользовательский интерфейс в вашем приложении.

Настройка внешнего вида кнопки в SwiftUI

Важно настроить внешний вид кнопки, чтобы она соответствовала общему дизайну вашего приложения. SwiftUI позволяет сделать это легко.

Вот пример:

struct ContentView: View {
  var body: some View {
    Button("Press Me!") {
      // Button action goes here
    }
    .padding()
    .background(.orange)
    .foregroundColor(.white)
    .font(.title2)
    .clipShape(RoundedRectangle(cornerRadius: 10))
  }
}

Предварительный просмотр:

Используйте модификаторы вида, чтобы настроить внешний вид кнопки в SwiftUI.

Этот код создает кнопку в SwiftUI и применяет ряд модификаторов для изменения ее внешнего вида и функциональности.

Разберем код:

• Button(«Press Me!») { } создает новую кнопку с заголовком Press Me! Текст внутри {} — это действие, которое будет выполнено при нажатии кнопки. В данном случае действие еще не определено.
• .padding() добавляет отступы вокруг кнопки. Padding — это пространство вокруг содержимого представления, которым в данном случае является кнопка. Без каких-либо аргументов она добавляет системное пространство по умолчанию со всех сторон кнопки.
• .background(.orange) устанавливает оранжевый цвет фона кнопки.
• .foregroundColor(.white) устанавливает белый цвет текста кнопки.
• .font(.title2) устанавливает шрифт заголовка кнопки в title2, что является предопределенным стилем, меньшим, чем title, но большим, чем headline.
• .clipShape(RoundedRectangle(cornerRadius: 10)) обрезает кнопку до формы прямоугольника с закругленными углами. Значение cornerRadius: 10 означает, что углы прямоугольника будут скруглены с радиусом 10.

Следует отметить, что эти модификаторы применяются по порядку. Так, например, сначала применяется отступ, затем цвет фона и так далее. Порядок применения этих модификаторов иногда может повлиять на итоговый внешний вид. В данном случае кнопка будет иметь подложку, затем цвет фона покроет кнопку и ее подложку, а затем обтравка будет применена к кнопке, включая ее подложку.

В результате получится кнопка с белым текстом «Press Me!», оранжевым фоном, небольшим количеством подложки вокруг текста и закругленными углами.

Подводя итог, можно сказать, что в SwiftUI можно настроить внешний вид кнопки, изменив цвета фона и текста, стиль шрифта и радиус углов. Для этого используются модификаторы background, foregroundColor, font и clipShape.

Добавление изображения к кнопке в SwiftUI

Кнопки — неотъемлемая часть любого пользовательского интерфейса, а добавление изображений к кнопкам часто делает их более привлекательными и понятными. В SwiftUI вы можете легко добавлять изображения к кнопкам с помощью представления Image.

Чтобы добавить изображение в кнопку, нужно создать экземпляр представления Image и передать его в качестве метки для кнопки. Вот дружелюбное авокадо, используемое в следующем примере:

Скачайте это изображение и добавьте его в ассеты вашего проекта.

struct ContentView: View {
  var body: some View {
    Button(action: {
      // action to perform when the button is tapped
    }) {
      Image("AvocadoFriend")
        .resizable() // This allows the image to be resized
        .frame(width: 100, height: 100) // This sets the size of the image
    }
  }
}

Получившийся предварительный просмотр:

В SwiftUI можно использовать представление Image внутри представления Button.

Вот как работает этот код:

• Button(action: { }) { } создает новую кнопку. Замыкание action содержит код, который будет выполняться при нажатии кнопки. В данном случае оно пустое, поэтому при нажатии кнопки ничего не произойдет.
• Image("AvocadoFriend") задает содержимое (или метку) кнопки в виде изображения. Аргументом является имя ресурса изображения, который, как ожидается, будет включен в ассеты приложения.
• .resizable() — это модификатор, который делает изображение изменяемым по размеру, то есть его можно растягивать или сжимать, чтобы оно поместилось в рамку.
• .frame(width: 100, height: 100) — модификатор, который устанавливает размер изображения 100 на 100 точек. Поскольку изображение можно изменять, оно будет масштабироваться, чтобы вписаться в эту рамку.

В общем, этот ContentView отображает кнопку с изображением AvocadoFriend размером 100 на 100 точек. Изображение будет изменено, чтобы вписаться в рамку, если оно еще не такого размера. В настоящее время кнопка ничего не делает при нажатии, но вы можете добавить функциональность, добавив код в замыкание.

Добавление действия к кнопке

Кнопки полезны, когда они могут что-то делать при тапе, клике или нажатии. В SwiftUI вы можете легко добавить действие к кнопке.

Вот как:

struct ContentView: View {
  var body: some View {
    Button("Tap Me!") {
      print("Button was tapped!")
    }
  }
}

Вот как это будет выглядеть, когда вы запустите приложение в симуляторе:

Нажмите на кнопку, чтобы увидеть результат в консоли.

В приведенном выше коде вы создаете кнопку Button с меткой Tap Me! и действием, которое при нажатии кнопки печатает Button was tapped! в консоль. Для этого вы передаете кнопке замыкание, которое выполняется при нажатии на кнопку.

Вы можете настроить действие так, чтобы оно выполнялось по вашему желанию, например:

• Переход на новый экран. Кнопки можно использовать для запуска перехода на другой экран или представление. Например, в приложении для ресторана кнопка может использоваться для перехода к детальному просмотру конкретного пункта меню.
• Манипулирование данными. С помощью кнопки можно манипулировать данными, например, добавить товар в корзину, удалить электронное письмо или добавить песню в избранное.
• Изменение элементов пользовательского интерфейса. Кнопки могут изменять внешний вид пользовательского интерфейса. Например, в погодном приложении кнопка может переключаться между различными видами, такими как почасовой и ежедневный прогнозы.
• Запуск и остановка задач. Кнопки могут управлять текущими задачами, такими как запуск или остановка загрузки, воспроизведение или пауза видео или обновление данных с сервера.
• Обновление переменных состояния. В SwiftUI часто используется кнопка для увеличения счетчика или переключения булевой переменной состояния, что вызывает обновление представления.

Если вы предпочитаете использовать функцию внутри замыкания, вы можете создать функцию, которая не принимает никаких параметров и ничего не возвращает (Void), и вызвать ее внутри действия кнопки. Вот пример:

struct ContentView: View {
  var body: some View {
    Button("Tap Me!") {
      buttonTapped()
    }
  }

  func buttonTapped() {
    print("Button was tapped!")
  }
}

В этом примере вы создаете функцию buttonTapped, которая печатает сообщение в консоль. Затем вы вызываете функцию buttonTapped внутри действия кнопки. Это поможет сохранить организованность кода и упростит повторное использование одной и той же функции в разных частях приложения.

В общем, добавить действие к кнопке в SwiftUI очень просто. Вы можете использовать замыкание или функцию и настроить действие так, чтобы оно делало все, что вам нужно.

Источник

← Предыдущая статья: Изображения и иконки — Часть 4