搜索框和发布按钮

image.png

  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)
    }