搜索框和发布按钮
2020-07-22 本文已影响0人
艾迪不是奥特曼

NavigationView {
Text("显示内容")
.navigationBarTitle("", displayMode: .inline)
.navigationBarItems(leading: 搜索框, trailing: 发布按钮)
}
搜索框和发布按钮:
private var 搜索框: some View {
//下面是一个白色"药丸形状",上面是"放大镜"图标和文字
ZStack {
Capsule()
.fill(Color.white)
.frame(width: UIScreen.main.bounds.width - 76, height: 34, alignment: .center)
//左边是放大镜,中间是文字,右边是 Spacer
HStack {
Text(Image(systemName: "magnifyingglass"))
.font(.system(size: 14))
Text("搜索关键词")
.font(.system(size: 13))
.foregroundColor(.secondary)
.lineLimit(1)
Spacer()
}
.padding(.leading, 12)
}
.offset(CGSize(width: 0, height: -1))
}
private var 发布按钮: some View {
//上面是"相机"图标,下面是"发布"文字. 全部设置为白色
VStack {
Text(Image(systemName: "camera.fill"))
.font(.title3)
Text("发布")
.font(.caption)
.fontWeight(.bold)
}
.foregroundColor(.white)
}