如何防止 navigationBarTitle 占满全角？

Question

我想将两个图标（刷新和设置）上移到与navigationBarTitle 相同的行：

这是我的看法：

struct Games: View {
    let diameter: CGFloat = 35.0
    
    var body: some View {
        NavigationView {
            VStack {
                // Create game
                HStack {
                    Image(systemName: "house.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 40, height: 40)
                        .foregroundColor(.blue)
                    Spacer()
                    Button(action: {
 
                    }){
                        Image(systemName: "arrow.clockwise")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 40, height: 40)
                            .foregroundColor(.gray)
                            .padding(.horizontal, 30)
                    }
                    NavigationLink(destination: Settings()){
                        Image("settings")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 40, height: 40)
                            .foregroundColor(.gray)
                    }
                }
                HStack{
                    Spacer()
                    Button(action: {  }){
                        Text("+ Create game")
                            .font(.custom("Seravek-Medium", size: 22))
                            .padding(15)
                            .background(
                                RoundedRectangle(cornerRadius: 5)
                                    .fill(Color.blue.opacity(0.1))
                            )
                    }
                }
                .frame(
                    maxWidth: .infinity,
                    maxHeight: 80,
                    alignment: .bottom
                )
            } // VStack
            .navigationTitle("Games").foregroundColor(.blue)
            .padding(25)
        } // NavigationView
    }
    
}

但似乎 navigationBarTitle 占据了整个宽度。

有什么办法可以解决这个问题吗？

Answer 1

我建议使用以下代码将这些图像添加到导航栏：

            .navigationBarItems(trailing:
                                    HStack {
                                        Button(action: {
                                            
                                        }){
                                            Image(systemName: "arrow.clockwise")
                                                .resizable()
                                                .aspectRatio(contentMode: .fill)
                                                .frame(width: 40, height: 40)
                                                .foregroundColor(.gray)
                                                .padding(.horizontal, 30)
                                        }
                                        NavigationLink(destination: Text("hello world")){
                                            Image("settings")
                                                .resizable()
                                                .aspectRatio(contentMode: .fill)
                                                .frame(width: 40, height: 40)
                                                .foregroundColor(.gray)
                                        }
                                    }
            )

作为替代方案，您可以使用上述工具栏，如下所示：

.toolbar {
                ToolbarItem(placement: .automatic) {
                    HStack {
                        Button(action: {

                        }){
                            Image(systemName: "arrow.clockwise")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 40, height: 40)
                                .foregroundColor(.gray)
                                .padding(.horizontal, 30)
                        }
                        NavigationLink(destination: Text("hello world")){
                            Image("settings")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 40, height: 40)
                                .foregroundColor(.gray)
                        }
                    }
                }
            }