首页 > 解决方案 > 如何使用 NavigationView 将我的 ContentView 链接到另一个视图

问题描述

我正在创建一个在主页 ContentView() 上显示服务列表的应用程序。用户应该能够从 ServiceListView() 中选择一个服务并在新页面上查看 ServiceDetailView()。

我的问题是:当我运行代码时,服务列表动画,服务列表没有填满整个页面(在底部留出空间),ServiceDetailView() 显示来自 ContentView() 的信息。

内容视图()代码:

            NavigationBarView()
                .padding(.horizontal, 15)
                .padding(.bottom)
                .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
                .background(Color.white)
            
            ScrollView(.vertical, showsIndicators: false, content: {
                VStack(spacing: 0) {
                    FeaturedTabView()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: (UIScreen.main.bounds.width - 0), height: 200)
                       .padding(.vertical, 10)
                    
                    ServiceListView()
                        .aspectRatio(contentMode: .fit)
                } //:VSTACK
            }) //:SCROLL
        }
        }
    .background(colorBackground.ignoresSafeArea(.all, edges: .all))
} //:ZSTACK
    .ignoresSafeArea(.all, edges: .top)
}

ServiceDetailView() 代码:

var service: Service
@State var currentlocation: String = ""
var body: some View {
    
    ZStack{
    Color(UIColor.systemGray6).ignoresSafeArea()

    VStack {

    HStack {
        Image(service.imageName)
            .resizable()
            .scaledToFit()
            .frame(height:80)
        
        Text(service.title)
            .font(.title)
            .fontWeight(.semibold)
            .lineLimit(/*@START_MENU_TOKEN@*/2/*@END_MENU_TOKEN@*/)
    }
        
    
        HStack {
            Image("green_start")
                .resizable()
                .scaledToFit()
                .frame(height:11)
                //.padding(.horizontal, 10)
        TextField("Current Location", text: $currentlocation)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            //.scaledToFit()
            //.padding()
           
            
        }.padding(.horizontal, 35)
        
            VStack{
                HStack {
                    Image("red_stop")
                        .resizable()
                        .scaledToFit()
                        .frame(height:11)
        TextField("Where to?", text: $currentlocation)
            .textFieldStyle(RoundedBorderTextFieldStyle())
                   
        
                }.padding(.horizontal, 35)
        }
        
        Spacer()
        
        VStack{
        MapView()
        }
        
        Link(destination: /*@START_MENU_TOKEN@*/URL(string: "https://www.apple.com")!/*@END_MENU_TOKEN@*/, label: {
            Text("CONFIRM")
                .bold()
                .font(.title2)
                .frame(width:260, height:50)
                .foregroundColor(.white)
                .background(Color.green)
                .cornerRadius(10)
                
        })
        
        }//.padding()
    
    }

ServiceListView() 代码:

var body: some View {
    NavigationView {
        
        List(services, id: \.id) { service in
            NavigationLink(destination: ServiceDetailView(service: service), label: {
                
                Image(service.imageName)
                    .resizable()
                    .scaledToFit()
                    .frame(height:60)
                    .padding(.vertical,1)
                
                VStack(alignment: .leading) {
                    
                    Text(service.title)
                        .fontWeight(.black)
                        .lineLimit(2)
                    
                    Text(service.subheading)
                        .fontWeight(.semibold)
                    
                    Text(service.description)
                        .font(.subheadline)
                        .foregroundColor(.black)
                        .lineLimit(5)
                        .padding(1)
                }
            })
            
        }
        .navigationBarTitle("Services")
        
       Spacer()
            
    }
}

标签: swiftswiftuiswiftui-listswiftui-navigationview

解决方案


推荐阅读