Question

一段时间以来，我一直在玩 SwiftUI。我想说明一下，我确实有 Java 和 JS 背景，但没有任何 Swift 经验。

所以想法是：我想要一个视图（稍后称为主视图），其中屏幕分为两部分（视图）。顶部的将用作页眉 - 图片可能带有页脚（屏幕截图中的磨砂页脚）。然后屏幕的第二部分我希望它是另一个实际上是 TabView 的视图。请参阅 unscrolled view of the main view 的附加屏幕截图和 scrolled view of the main view

目前，我现在拥有的是：

struct CarDetailsView: View {
    let car: Car
    
    var body: some View {
        ScrollView {
            HeadingView(car: car)
            CarDescriptionView(car: car)
                .offset(y: -36)
        }
        .ignoresSafeArea()
    }
}

哪个工作正常（如屏幕截图所示），其中 HeadingView 是带有页脚的图片，然后 CarDescriptionView 是屏幕的“第二个”视图，带有描述。这也是我想让它成为 TabView 的部分。

我想，我可以将 CarDescription 视图包装在 TabView 中，就像这样：

struct CarDetailsView: View {
    let car: Car
    
    var body: some View {
        ScrollView {
            HeadingView(car: car)
            TabView {
                CarDescriptionView(car: car)
                    .offset(y: -36)
                    .tabItem {
                        Label("Description", systemImage: "car")
                    }
            }
            
        }
        .ignoresSafeArea()
    }
}

然而，我正在发生这件事here

注意，我的另一个View的结构是：

struct HeadingView: View {
    
    var car: Car
    var body: some View {
        
        VStack(spacing: 0) {
            Text("25 300EUR")
                .foregroundColor(.white)
                .font(.title)
                .bold()
                .padding(.horizontal, 12)
                .padding(.vertical, 4)
                .background(Color.init(hexadecimal: "66B054"))
                .clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
                .padding(16)
            
            
            HStack {
                Image(systemName: "car")//todo: make logo go here
                    .padding(.leading, 16)
                    .padding(.trailing, 16)
                
                VStack(alignment: .leading, spacing: 4) {
                    Text("\(car.make) \(car.model)")
                        .font(.title2)
                        .bold()
                    HStack {
                        Text("\(String(car.odometer / 1000))k km  |")
                            .font(.caption)
                        Text("\(String(car.year))  |")
                            .font(.caption)
                        Text("\(String(car.engine.horsepower))bhp  |")
                            .font(.caption)
                        Text("20km away")
                            .font(.caption)
                    }
                }
                
                Spacer()
            }
            .foregroundColor(.white)
            .frame(maxWidth: .infinity)
            .padding(.top, 12)
            .padding(.bottom, 38)
            .background(
                VisualEffectBlurView(blurStyle: .systemThinMaterialDark)
            )
            
            
        }
        .frame(maxWidth: .infinity, minHeight: 500, maxHeight: 500)
        .background(
            Image(car.images[0])
                .resizable()
                .aspectRatio(contentMode: .fill)
        )
        .mask(
            RoundedRectangle(cornerRadius: 0, style: .continuous)
        )
    }
}

和

struct CarDescriptionView: View {
    let car: Car
    
    var body: some View {
        ScrollView {
            Text("Description")
                .font(.title)
                .bold()
                .padding(.top, 32)
                .padding(.leading, 16)
                .padding(.bottom, 16)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            Text(car.description)
                .font(.body)
                .padding(.horizontal)
            
            Text(car.description + "\n")
                .font(.body)
                .padding(.horizontal)
            Text(car.description + "\n")
                .font(.body)
                .padding(.horizontal)
            Text(car.description + "\n")
                .font(.body)
                .padding(.horizontal)
            Text(car.description + "\n")
                .font(.body)
                .padding(.horizontal)
        }
        .background(.white)
        .mask(
            RoundedRectangle(cornerRadius: 30, style: .continuous)
        )
    }
}

请注意，我还尝试将 TabView 放在 CarDetailsView 中，但结果还是一样。将主要组件中的ScrollView 更改为VStack 会产生一些工作视图。但是，然后我没有滚动标题视图（汽车图像），但只有我能够在选项卡式视图中滚动。

正如我开头所说，我对此很陌生，所以我什至不确定这个概念是否正确。

SwiftUI TabView 嵌入另一个视图问题

0 个答案: