SwiftUI, как установить изображение для NavigationBar titleView, как в UIKit?

Я хочу установить изображение в titleView NavigationBar в SwiftUI, как мы это делаем в UIKit

navigationItem.titleView = UIImageView(image: UIImage(named: "logo"))

вот как мы это делаем в UIKit.

кто-нибудь знает как это сделать?


person Zeeshan Ahmed    schedule 22.10.2019    source источник


Ответы (6)


Вот как это сделать:

  1. Добавьте в свой проект SwiftUIX.
  2. Настройте свой собственный вид заголовка с помощью View.navigationBarTitleView(_:displayMode:)

Пример кода:

struct ContentView: View {
    public var body: some View {
        NavigationView {
            Text("Hello World")
                .navigationBarTitleView(MyView())
        }
    }
}
person Vatsal Manot    schedule 18.02.2020
comment
Это отлично работает, но для того, чтобы поля соответствовали системной панели навигации, мне также нужно было объединить .navigationBarTitle("", displayMode: .inline) в цепочку. - person Jay Lee; 31.03.2020
comment
Не могли бы вы дать ссылку на navigationBarTitleView Apple? Я не могу этого найти. - person Chris Prince; 17.01.2021
comment
@ChrisPrince это настраиваемый модификатор в SwiftUIX, он не является частью официального фреймворка :) - person Vatsal Manot; 26.01.2021
comment
Wow SwiftUIX - действительно крутой проект! Не знал об этом, но теперь я собираюсь использовать массу его функций. Но возможно ли, используя этот подход, отображать NavigationbarTitle с изображением? - person the.blaggy; 15.06.2021

Просто добавьте свой корневой вид в ZStack с выравниванием по верхнему краю и добавьте свой собственный центральный вид после корневого вида.

struct CenterNavigattionBar: View {
    var body: some View {
        ZStack(alignment: .top){
            //Root view with empty Title
            NavigationView {
                Text("Test Navigation")
                .navigationBarTitle("",displayMode: .inline)
                .navigationBarItems(leading: Text("Cancle"), trailing: Text("Done"))
            }
            //Your Custom Title
            VStack{
                Text("add title and")
                    .font(.headline)
                Text("subtitle here")
                    .font(.subheadline)
            }
        }

    }
}

Перед изображением

1

После изображения

2

person Jitesh Bharadiya    schedule 25.05.2020
comment
Я получаю странное пространство под панелью навигации с этим. - person Ahmadreza; 20.10.2020

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

  import SwiftUI

  struct HomeView: View {

  // MARK: - Initializer
  init() {
      let appearance = UINavigationBar.appearance()
      appearance.isOpaque      = true
      appearance.isTranslucent = false
      appearance.barTintColor  = UIColor(named: "background")
      appearance.shadowImage   = UIImage()
  }


  // MARK: - View
  // MARK: Public
  var body: some View {
      NavigationView {
          VStack(spacing: 20) {
              Text("Hello")
            
              Text("Navigation Bar Test")
          }
          .navigationBarTitleDisplayMode(.inline)
          .navigationBarItems(leading: leadingBarButtonItems, trailing: trailingBarButtonItems)
          .toolbar {
              ToolbarItem(placement: .principal) {
                  VStack {
                      Text("Title").font(.headline)
                      Text("Subtitle").font(.subheadline)
                  }
              }
            
          }
      }
  }

  // MARK: Private
  private var leadingBarButtonItems: some View {
      Button(action: {
        
      }) {
          Text("Left Button")
              .font(.system(size: 12, weight: .medium))
      }
  }

  private var trailingBarButtonItems: some View {
      HStack {
          Button(action: {
            
          }) {
               Text("R1\nButton")
                  .font(.system(size: 12, weight: .medium))
                  .multilineTextAlignment(.center)
          }

          Button(action: {
            
          }) {
              Text("R2\nButton")
                  .font(.system(size: 12, weight: .medium))
                  .multilineTextAlignment(.center)
          }
      }
  }
}

введите описание изображения здесь

person Den    schedule 05.01.2021

В настоящее время вы не можете.

Есть два перегрузки для .navigationBarTitle(), принимая либо Text представление, либо тип, соответствующий StringProtocol. Вы даже не можете перейти в модифицированный вид, например Text("Title").font(.body). Это была бы отличная функция, я бы отправил запрос функции: http://feedbackassistant.apple.com

person John M.    schedule 22.10.2019

Может, это у вас работает?

В основном: используйте GeometryReader, чтобы получить ширину экрана. Иметь NavigationBarItems(leading: HStack {Spacer() Image("name").resizable().frame(width:..., height: ..., alignment: .center Spacer()}.frame(width:geometry.size.width)

Пример кода:

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                Text("Hello, world!")
                    .padding()

                    .navigationTitle("test")

                    .navigationBarItems(leading: HStack {
                        Spacer()

                        Image("money")
                            .resizable()
                            .frame(width: 50, height: 50, alignment: .center)

                        Spacer()
                    }
                    .frame(width: geometry.size.width)
                    )
            }
        }
    }
}
person bruijnesteijn    schedule 13.05.2021

Попробуй это...

Как разместить логотип в NavigationView в swiftui?

Это показывает, как обрабатывать добавление изображения в NavigationView в SwiftUI. Надеюсь, это поможет.

person Nick Perkins    schedule 22.10.2019
comment
Как насчет добавления объяснения. Хорошие ответы сопровождаются объяснениями. - person Gerhard; 22.10.2019
comment
Вы оба являетесь душой компании, я в этом уверен. ржу не могу . Он спросил, как это сделать. Я рассказал, как это сделать. Он не спросил почему. - person Nick Perkins; 24.10.2019
comment
это не решение, вы пробовали это однажды, прежде чем опубликовать здесь? - person Zeeshan Ahmed; 26.10.2019
comment
stackoverflow .com / questions / 56546213 / здесь показано, как обрабатывать добавление изображения в NavigationView. @ZeeshanAhmed - person Nick Perkins; 06.11.2019