Поваренная книга SwiftUI: настройка фона и границ представления

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

Представим, что у вас есть базовое представление с текстовым view:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .frame(width: 200, height: 50)
  }
}

Для настройки фона этого представления можно использовать модификатор background. Например, фон текстового представления можно сделать красным следующим образом:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .frame(width: 200, height: 50)
      .background(Color.red)
  }
}

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

Представление SwiftUI с красным фоном.

В качестве фона представления можно также использовать изображение. Например, попробуйте добавить это изображение в файл Assets.xcassets и назвать его background:

Фоновое изображение для использования.

Теперь обновите код, чтобы использовать в качестве фона это изображение:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .frame(width: 200, height: 50)
      .background(
        Image("background")
          .resizable(resizingMode: .tile)
          .opacity(0.25)
      )
      .fontWeight(.heavy)
  }
}

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

Представление SwiftUI с изображением в фоне.

Рассмотрим добавленные здесь новые строки:

1. Image("background"): Создает экземпляр Image с указанным именем изображения «background». Имя изображения соответствует имени, которое вы дали файлу изображения в папке Assets.xcassets.
2. .resizable(resizingMode: .tile): Этот модификатор позволяет указанному изображению изменять свои размеры в соответствии с размерами его контейнера. При использовании resizingMode: .tile изображение повторяется, чтобы заполнить свободное пространство, если исходный размер изображения меньше размера представления. Если resizingMode не указан, то по умолчанию используется режим .stretch, который масштабирует изображение, чтобы оно поместилось в кадр, сохраняя при этом соотношение сторон.
3. .opacity(0.25):: Модификатор opacity устанавливает непрозрачность представления в указанное значение. В данном случае значение непрозрачности равно 0.25, что делает фоновое изображение слегка прозрачным.

Чтобы добавить границу к представлению, можно использовать модификатор border. Например, попробуйте добавить к представлению черную границу шириной 2 точки:

struct ContentView: View {
  var body: some View {
    Text("Hello, World!")
      .frame(width: 200, height: 50)
      .background(
        Image("background")
          .resizable(resizingMode: .tile)
          .opacity(0.25)
      )
      .fontWeight(.heavy)
      .border(Color.black, width: 2)
  }
}

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

Представление SwiftUI с фоновым изображением и границей.

Используя модификаторы вида background и border, можно настраивать фон и границы представлений в SwiftUI. Комбинируя эти модификаторы, вы можете придать пользовательскому интерфейсу вашего приложения отточенный и профессиональный вид. Смело экспериментируйте с различными цветами и изображениями, чтобы сделать свои представления уникальными и визуально привлекательными!

Предложите исправление: выделите текст и нажмите Ctrl+ Enter

← Предыдущая статья: Создание View и его модификаторы

Источник