如何让SwiftUI的navigationTitle与toolbarItem菜单按钮水平对齐

你遇到的对齐问题是large显示模式的导航标题的默认布局特性导致的：大尺寸导航标题默认位于导航栏下半区域，而navigationBarTrailing位置的ToolbarItem默认和导航栏上半区的紧凑模式标题对齐，因此会出现垂直方向不对齐的情况。

下面是三个可直接落地的解决方案：

方案1：快速调整偏移量（简单适配） #

直接给Menu的标签添加垂直偏移，手动对齐大标题，可根据实际使用的字体大小微调偏移数值：

NavigationView{
    VStack {
       // 省略其他业务代码
    }
    .navigationBarTitle(Text(model.matches[index].name).font(.subheadline), displayMode: .large)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Menu(content: {
                Text("Menu Item 1")
                Text("Menu Item 2")
                Text("Menu Item 3")
            }, label: {
                Image(systemName: "ellipsis")
                    .offset(y: 16) // 调整该数值直到和大标题水平对齐
            })
        }
    }
}

如果需要适配滚动后大标题收起变为紧凑模式的场景，可以配合@State监听页面滚动偏移量，动态调整offset的数值即可。

方案2：改用inline模式导航栏（无兼容问题） #

如果不需要大尺寸标题效果，直接把导航栏的displayMode改为.inline，标题和右侧按钮会自动对齐：

.navigationBarTitle(Text(model.matches[index].name).font(.subheadline), displayMode: .inline)

方案3：完全自定义导航栏 #

如果上述方案都不符合需求，可以隐藏系统导航栏，自己用HStack实现头部，完全可控对齐效果：

NavigationView{
    VStack(spacing: 0) {
        // 自定义导航栏
        HStack {
            Text(model.matches[index].name)
                .font(.largeTitle)
                .fontWeight(.bold)
            Spacer()
            Menu(content: {
                Text("Menu Item 1")
                Text("Menu Item 2")
                Text("Menu Item 3")
            }, label: {Image(systemName: "ellipsis")})
        }
        .padding(.horizontal)
        .padding(.vertical, 12)
        // 原有业务内容
        VStack {
            // 省略其他业务代码
        }
    }
    // 隐藏系统默认导航栏
    .navigationBarHidden(true)
}

相关效果截图：

内容的提问来源于stack exchange，提问作者Nat Serrano