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)
}
}
}
}
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.
The best fix would be to remove the outer ScrollView
.
Alternatively, you could try setting an ideal (or fixed) height on the TabView
. For example:
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.