视图设计未显示在 SwiftUI 中的选取器内

Question

我需要在标签 0 中的选择器中显示 2 个结构视图，如果我在单独的视图中显示它，则需要显示

TaskHistoryView(activities: activities) why this is not showing inside tag 0

，然后显示但不显示选择器内部，为什么？如何修复

struct TaskManagementDetailsView: View {

@State var data: TaskManagementData? = nil
@State var activities: [TaskActivity] = []
@StateObject private var viewModel = TaskManagementViewModel()

@State private var selectedTab: Int = 0
var selectedTabVal = 0

var body: some View {
    ZStack {
        Color.hexF4F4FC
            .ignoresSafeArea()
        VStack(spacing: 0) {
            
            ScrollView {
                
                VStack(alignment: .leading) {
                    Text(data?.taskList ?? "Test")
                    
                    
                    VStack(alignment: .leading) {
                        Text("Assigned to")
                            .font(.calibriBold(with: 16))
                    }
                    .padding(.vertical, 10)
                    
                    VStack(alignment: .leading) {
                        Text("Start Date")
                            .font(.calibriBold(with: 16))
                        Text(data?.startDate ?? "")
                            .font(.calibriRegular(with: 16))
                            .foregroundStyle(Color.black.opacity(0.7))
                    }
                    
                    VStack(alignment: .leading) {
                        Text("Assign By:")
                            .font(.calibriBold(with: 16))
                        Text(data?.assignBy ?? "")
                            .font(.calibriRegular(with: 16))
                            .foregroundStyle(Color.black.opacity(0.7))
                    }
                    
                    //this is picker
                    VStack {
                        Picker("", selection: $selectedTab) {
                            Text("History")
                                .tag(0)
                            Text("Comments")
                                .tag(1)
                        }
                        .pickerStyle(.segmented)
                        .padding(.horizontal)
                        .padding(.top, 2)
                        .padding(.bottom, 10)
                    }
                    .background(Color.appGreen2)
                    .padding(.bottom, 10)
                    TabView(selection: $selectedTab) {
                        ScrollView { 
                            TaskHistoryView(activities: activities)
                                .padding()
                        }
                        .tag(0)
                    }
                    .tabViewStyle(.page(indexDisplayMode: .never))
                    .animation(.default, value: selectedTab)
                }
                .padding(.horizontal)
                .padding(.top, 20)
            }
        }
    }
    .onAppear {
        if let id = data?.id {
            viewModel.fetchTasksDetails(id: id) { status, data in
                if status {
                    if let task = data?.task {
                        self.data = task
                    }
                    self.activities = data?.activities ?? []
                    print("Activities: \(self.activities)") // data coming here too
                    selectedTab = selectedTabVal
                    
                    
                }
            }
        }
    }
}
}






struct TaskHistoryView: View {

@Environment(\.dismiss) var dismiss
@State var activities: [TaskActivity] = []

var body: some View {
    ZStack {
      
        VStack(spacing: 0) {

            List {
                ForEach(0..<(activities.count), id: \.self) { i in
                    let data = activities[i]
                    HStack {
                        VStack(alignment: .leading, spacing: 4) {
                            Text("\(data.name ?? "") \(data.activity ?? "")")
                                .font(.calibriRegular(with: 16))
                                .foregroundStyle(Color(hex: 0x272A2C))
                            Text(data.actionOn ?? "")
                                .font(.calibriRegular(with: 12))
                                .foregroundStyle(Color.hex9FA297)
                        }
                        Spacer()
                    }
                    .padding(10)
                    .background(
                        Color.white
                            .clipShape(RoundedRectangle(cornerRadius: 8))
                            .shadow(color: Color(hex: 0x3C4441, alpha: 0.08), radius: 4, x: 0, y: 0)
                    )
                   
                }
                .listRowInsets(EdgeInsets())
            }
            .listStyle(.plain)
        }
    }
}
}

Answer 1

这可能是因为

TabView

嵌套在

ScrollView

内。

滚动视图内的内容以其理想尺寸显示，该尺寸可能非常小。

• 最好的解决方法是删除外部

  ScrollView

• 或者，您可以尝试在

  TabView

  上设置理想（或固定）高度。例如：

TabView(selection: $selectedTab) {
    ScrollView {
        // ...
    }
    .tag(0)
}
.frame(idealHeight: 300) // 👈 HERE

由于

TabView

的内容也是可滚动的，因此您可能也需要对嵌套内容应用类似的修复。但对于这些嵌套情况，您也许可以使用

.containerRelativeFrame(.vertical)

。