Site icon AppTractor

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

AppTractor

Кнопки — важнейшие компоненты любого пользовательского интерфейса, позволяющие пользователям взаимодействовать и инициировать действия в приложении. В 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 и применяет ряд модификаторов для изменения ее внешнего вида и функциональности.

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

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

В результате получится кнопка с белым текстом «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.

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

В общем, этот 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! в консоль. Для этого вы передаете кнопке замыкание, которое выполняется при нажатии на кнопку.

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

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

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

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

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

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

Источник

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

Exit mobile version