SwiftUI中導航欄設置圖片和標題

Question

如果有人知道如何實施它或關於如何實施的想法，將不勝感激。

Answer 1

使用這種方法

    NavigationView{
        
        VStack(alignment: .leading) {
            
            ScrollView(.vertical){
                
                    ForEach(list, id: \.self) { item in
                            Text(item).font(.title).padding()
                    }
                }
            
            Spacer()
        }
                .toolbar {
                    ToolbarItem(placement: .principal) {
                            Text("write something for title")
                                .font(.heavy)
                    }
                    
                    ToolbarItem(placement: .navigationBarTrailing) {
                            Image("image").resizable()
                                .scaledToFit()
                                .frame(width: 100, height: 50, alignment: .trailing)
                        }
                    }
    }
}
}

Answer 2

我只能回答第一部分，即 -如何在標題中設置圖像：

（在導航欄中）

struct ContentView: View {
var body: some View {
            
    let array = ["thing 1", "thing 2", "thing 3", "others"]
    NavigationView{
        
        VStack(alignment: .leading) {
            
            ScrollView(.vertical){
                
                    ForEach(array, id: \.self) { item in
                            Text(item).font(.title).padding()
                    }
                }
            
            Spacer()
        }
        .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                            Text("Title")
                                .font(.title)
                    }
                    
                    ToolbarItem(placement: .navigationBarTrailing) {
                            Image(Constants.logoImage).resizable()
                                .scaledToFit()
                                .frame(width: 100, height: 50, alignment: .trailing)
                        }
                    }
    }
}
}

希望能幫助到你！

如果我願意的話，也許我將來也會在這里添加 animation。

Answer 3

這主要是你所追求的。 在聲明navigationBarTitle時使用displayMode: .automatic .automatic 意味着它將顯示為 largeTitle 直到滾動時 NavBar 轉到displayMode: .inline 。 例如，我只是使用SF Symbols圖像，但您可以以相同的方式交換 Cap 的盾牌。 如果您想要交互，請將其包裝在一個按鈕中。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0...1000, id: \.self) { _ in
                Text("Sample")
            }
            .navigationBarTitle("Large Title", displayMode: .automatic)
            .navigationBarItems(trailing: Image(systemName: "shield"))
        }
    }
}

Answer 4

這是在 UIKIT 中完成的。

這是代碼的樣子

let viewA = UIView()
let viewB = UIView()

private func setupNavigationBarAppearance() {

        viewA.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewA)))
        viewB.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewB)))
        
        let leftBarButtonItem = UIBarButtonItem(customView: viewA)
        let rightBarButtonItem = UIBarButtonItem(customView: viewB)
        
        navigationItem.leftBarButtonItem = leftBarButtonItem
        navigationItem.rightBarButtonItem = rightBarButtonItem
        navigationItem.title = "Hello World"
        
    }

@objc private func didViewA() {
        print("Hello")
    }
    
    @objc private func didViewB() {
        print("World")
    }

我在這里使用了 UIView，因為 ImageView 是 UIView 的子類，因此您可以將其與 ZF972F83018E7DB28C23D1C3 相關聯。 如果不需要，您也可以刪除左或右 barButtonItem。