在SwiftUI中为导航栏创建通用布局,以便其他SwiftUI视图应该重复使用相同的导航栏

zpqajqem  于 2022-10-23  发布在  Swift
关注(0)|答案(2)|浏览(218)

在iOS SwiftUI中,我们如何为导航栏做一个通用的布局,这样我们就可以在所有项目中使用它,而不需要重写相同的代码?

我们可以使用ViewBuilder为常见代码创建一个基本视图,如下所示:

  1. struct BaseView<Content: View>: View {
  2. let content: Content
  3. init(@ViewBuilder content: () -> Content) {
  4. self.content = content()
  5. }
  6. var body: some View {
  7. // To-do: The most important part will go here
  8. }
  9. }

如何在视图生成器或基视图中添加导航条形码?

dy1byipe

dy1byipe1#

您可以像这样创建view的扩展。您可以查看my blog entry for details

  1. import SwiftUI
  2. extension View {
  3. /// CommonAppBar
  4. public func appBar(title: String, backButtonAction: @escaping() -> Void) -> some View {
  5. self
  6. .navigationTitle(title)
  7. .navigationBarTitleDisplayMode(.inline)
  8. .navigationBarBackButtonHidden(true)
  9. .navigationBarItems(leading: Button(action: {
  10. backButtonAction()
  11. }) {
  12. Image("ic-back") // set backbutton image here
  13. .renderingMode(.template)
  14. .foregroundColor(Colors.AppColors.GrayscaleGray2)
  15. })
  16. }
  17. }

现在,您可以在视图的任何位置使用此appBar

  1. struct TransactionsView: View {
  2. @Environment(\.presentationMode) var mode: Binding<PresentationMode>
  3. var body: some View {
  4. VStack(spacing: 0) {
  5. }
  6. .appBar(title: "Atiar Talukdar") {
  7. self.mode.wrappedValue.dismiss()
  8. }
  9. }
  10. }
  11. struct TransactionsView_Previews: PreviewProvider {
  12. static var previews: some View {
  13. TransactionsView()
  14. }
  15. }
展开查看全部
n8ghc7c1

n8ghc7c12#

实现这一点的一种方法是使用自定义视图作为覆盖。
例如,考虑下面的代码,该代码使用覆盖来创建自定义导航栏:

  1. struct Home: View {
  2. var body: some View {
  3. ScrollView {
  4. // Your Content
  5. }
  6. .overlay {
  7. ZStack {
  8. Color.clear
  9. .background(.ultraThinMaterial)
  10. .blur(radius: 10)
  11. Text("Navigation Bar")
  12. .font(.largeTitle.weight(.bold))
  13. .frame(maxWidth: .infinity, alignment: .leading)
  14. .padding(.leading, 20)
  15. }
  16. .frame(height: 70)
  17. .frame(maxHeight: .infinity, alignment: .top)
  18. }
  19. }
  20. }

.overlay中的ZStack将生成一个看起来像导航栏的视图。然后,您可以将它移到它自己的结构视图中,向它添加不同的变量,并从覆盖中调用它。

展开查看全部

相关问题