NavigationView 标题中的 SwiftUI 多行文本
SwiftUI multiline text in a NavigationView Title
如何让这个标题多行?
我试过将标题文本设置为多行,甚至用 allowsThigtening(flag: Bool) 配置它,但是 none 这些选项有效。
当前代码在这里:
import SwiftUI
struct DistributionCentersView: View {
var dcViewModel = DistributionCenterViewModel()
@State private var pickedSelectedData = 0
@State private var searchTerm = ""
init() {
//...
}
var body: some View {
NavigationView {
VStack {
VStack {
Picker(selection: $pickedSelectedData, label: Text("")){
Text("All").tag(0)
Text("Nevial").tag(1)
Text("Net power").tag(2)
}.pickerStyle(SegmentedPickerStyle())
.foregroundColor(Color.white)
.background(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
SearchBar(text: $searchTerm)
}
.padding(.leading, 16)
.padding(.trailing, 16)
.padding(.top, 34)
List {
ForEach (dcViewModel.distribuitionCenters){ dc in
ZStack {
DistributionCenterCell()
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
NavigationLink(destination: Text("Test")) {
EmptyView()
}.buttonStyle(PlainButtonStyle())
}// This optionm avoid tinting
}.listRowBackground(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
}
.navigationBarTitle(Text(Constants.Distribution.text), displayMode: .large)//Desired multiline title
.listStyle(GroupedListStyle())
.navigationBarItems(leading: NavigationLink(destination: ProfileView()) { Image(Constants.NavImages.human).foregroundColor(Color.white)}, trailing: Image(Constants.NavImages.phone).foregroundColor(Color.white))
}
.background(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
}
}
}
正如 Asperi 所说,默认情况下不可能有多行导航栏标题。因此,按照 Asperi 的建议,我隐藏了默认标题并设置了自定义 Text():
VStack(alignment: .leading) {
Text(Constants.Distribution.text)
.font(.system(size: 34, weight: .heavy))
.foregroundColor(Color.white)
}
。
.
.
.navigationBarTitle(Text(""), displayMode: .inline)
有关详细信息,请查看此 link
NavigationView {
Text("Hello, SwiftUI!")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
VStack {
Text("Title").font(.headline)
Text("Subtitle").font(.subheadline)
}
}
}
}
如何让这个标题多行?
我试过将标题文本设置为多行,甚至用 allowsThigtening(flag: Bool) 配置它,但是 none 这些选项有效。
当前代码在这里:
import SwiftUI
struct DistributionCentersView: View {
var dcViewModel = DistributionCenterViewModel()
@State private var pickedSelectedData = 0
@State private var searchTerm = ""
init() {
//...
}
var body: some View {
NavigationView {
VStack {
VStack {
Picker(selection: $pickedSelectedData, label: Text("")){
Text("All").tag(0)
Text("Nevial").tag(1)
Text("Net power").tag(2)
}.pickerStyle(SegmentedPickerStyle())
.foregroundColor(Color.white)
.background(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
SearchBar(text: $searchTerm)
}
.padding(.leading, 16)
.padding(.trailing, 16)
.padding(.top, 34)
List {
ForEach (dcViewModel.distribuitionCenters){ dc in
ZStack {
DistributionCenterCell()
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
NavigationLink(destination: Text("Test")) {
EmptyView()
}.buttonStyle(PlainButtonStyle())
}// This optionm avoid tinting
}.listRowBackground(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
}
.navigationBarTitle(Text(Constants.Distribution.text), displayMode: .large)//Desired multiline title
.listStyle(GroupedListStyle())
.navigationBarItems(leading: NavigationLink(destination: ProfileView()) { Image(Constants.NavImages.human).foregroundColor(Color.white)}, trailing: Image(Constants.NavImages.phone).foregroundColor(Color.white))
}
.background(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
}
}
}
正如 Asperi 所说,默认情况下不可能有多行导航栏标题。因此,按照 Asperi 的建议,我隐藏了默认标题并设置了自定义 Text():
VStack(alignment: .leading) {
Text(Constants.Distribution.text)
.font(.system(size: 34, weight: .heavy))
.foregroundColor(Color.white)
}
。 . .
.navigationBarTitle(Text(""), displayMode: .inline)
有关详细信息,请查看此 link
NavigationView {
Text("Hello, SwiftUI!")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
VStack {
Text("Title").font(.headline)
Text("Subtitle").font(.subheadline)
}
}
}
}