swiftuistructviewpicker

View design not showing inside Picker in SwiftUI


I need to show 2 struct views in picker in tag 0 i need to show TaskHistoryView(activities: activities) why this is not showing inside tag 0 if i show it in separate view then showing but not showing inside picker why? how to fix

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

Solution

  • This may be because the TabView is nested inside a ScrollView.

    Content inside a scroll view is shown at its ideal size, which may be extremely small.

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

    Since the content of the TabView is also scrollable, you may need to apply similar fixes to the nested content too. But you might be able to use .containerRelativeFrame(.vertical) for these nested cases.