如何在swift ui的导航视图中的大标题下方添加副标题？

Posted 2023-04-19

【中文标题】如何在swift ui的导航视图中的大标题下方添加副标题？

【英文标题】：How to add a subtitle below a large title in a navigation view in swift ui?

【发布时间】：2021-09-17 00:14:40

【问题描述】：

如何在以这种方式定义的大标题下添加副标题？

NavigationView

        VStack()
           //"Some code" 
        
        .navigationTitle("Analytics")

【参考方案1】：

你可以试试这样的：

 NavigationView
            VStack()
                //"Some code"
            
            .navigationBarTitleDisplayMode(.large)
            .toolbar 
                ToolbarItem(placement: .navigationBarLeading) 
                    VStack 
                        Text("Title").font(.largeTitle).bold()
                        Text("Subtitle").font(.subheadline)
                    
                
            
        

【讨论】：

谢谢。你如何让这个 VStack 表现得像一个导航标题？因为向下滚动时 NavigationBar 太小了。它也被压缩在左上角，我正在尝试添加一些间距。

【参考方案2】：

似乎“navigationSubtitle”仅适用于 macOS，这是在 ios 中的另一种方式：

        .navigationBarItems(leading: VStack 
            Text("Analytics").font(.largeTitle).bold()
            Text("Subtitle")
        )

编辑更新：

你也可以试试这个，但会丢失一些字体选择：

.navigationTitle("Subtitle") 
.navigationBarItems(leading: Text("Analytics").font(.largeTitle).bold())

【讨论】：

感谢您的解决方案，但有一个小问题：标题和副标题与 navigationTitle 的位置不同。所以 NavigationTitle 的位置有一个空白区域，并且项目被压缩到左上角。因此，向下滚动时，导航栏太小而无法容纳项目。也许使条更大并添加一些填充将是一种解决方法

你可以试试这个，但会丢失一些字体选择：" .navigationTitle("Subtitle") .navigationBarItems(leading: Text("Analytics").font(.largeTitle).bold() )"

【参考方案3】：

我找到了我正在寻找的解决方案：基本上创建屏幕顶部，因为它通常没有导航视图，然后在下面添加一个滚动视图。

HStack 
    VStack(alignment: .leading, spacing: 5) 
        Text("Title")
             .font(.largeTitle)
             .foregroundColor(Color(UIColor.label))
             .fontWeight(.bold)
                        
        Text("subtitle")
             .font(.subheadline)
             .foregroundColor(Color(UIColor.label))
     
                
     Spacer()         
 
 .padding()
            
            
            
 ScrollView(.vertical, showsIndicators: false)