Блог

Ниже приведен мой код для создания представления в SwiftUI. Я хочу расположить мою кнопку приветствия в нижней части экрана, как показано ниже.

 struct welcomeViewControllerView: View {
      var body: some View {
            Text("Welcome")
              .font(.system(size: 20, design: .rounded))
              .padding(.leading)
              .multilineTextAlignment(.center)
              .background(

            Image("splashBackground")
              .resizable()
              .edgesIgnoringSafeArea(.all)
              .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
        
            Button(action:{print("button pressed")})
              {
                Text("Continue")
                .font(.system(size: 20, design: .rounded))
                .foregroundColor(.black)
                .frame(width: 300, height: 50, alignment: .center)
               .background((Image("buttonImage")).resizable().frame(width: 300, height: 50, alignment: .center))      
         }
      }
   }

class welcomeViewController: UIHostingController<welcomeViewControllerView> {
        required init?(coder: NSCoder)
         {
             super.init(coder: coder,rootView: welcomeViewControllerView());
          }
    
          override func viewDidLoad()
         {
           super.viewDidLoad()
            view.backgroundColor = .white
         }
}
 

Как я могу расположить свою кнопку в нижней части экрана? Я опубликовал скрин ниже. Я довольно новичок в использовании SwiftUI.

 struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 60, height: 60)
                .foregroundColor(.red)
            
            Group{
                Text("Welcome!")
                    .font(.title)
                
                Button(action: {
                    print("tapped!")
                }, label: {
                    Text("Continue")
                        .foregroundColor(.white)
                        .frame(width: 200, height: 40)
                        .background(Color.green)
                        .cornerRadius(15)
                        .padding()
                })
            }.frame(maxHeight: .infinity, alignment: .bottom)
        }
    }
}
 

Результат:

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

Для фона, поскольку он в основном черный, я использовал Color.black, чтобы закрасить весь экран, и предположил, что вы могли бы использовать меньшее изображение для логотипа. Это позволяет вам отправлять изображение меньшего размера, которое не будет искажаться. Разделение цвета экрана также позволяет вам соответствовать настройкам светлого / темного режима устройства. Смотрите раздел Color(UIColor.systemBackground) и @Environment(.colorScheme), если это интересно.

 ZStack {
    Color.black
    
    Text("Welcome")
        .foregroundColor(.white)
        .font(.title)
    
    VStack {
        Image(systemName:"flame.fill")
            .resizable()
            .aspectRatio(contentMode:.fit)
            .foregroundColor(Color.blue)
            .frame(height:100)
            .padding([.top], 20)
        Spacer() // will spread content to top and bottom of VStack
        Button(action:{print("Continue")}){
            Text("Continue")
                .foregroundColor(.black)
                .padding(10)
                .background(Color.green)
                .cornerRadius(10)
        }
        Spacer()
            .frame(height:50)  // limit spacer size by applying a frame
    }
}
 

Выше вы попадаете ниже:
Макет с помощью bkg с использованием ZStack и Spacer