Removing More?

I use the ForEach enumeration to list a View horizontally. And I get the following picture.

So far, so good... If I select the 5th object or 6th one, something odd (< More) appears. I don't know where it comes from. I have never seen it before. How does it happen? I wonder how I can remove it? I have searched the net for a clue to no avail. I don't even know how to describe it.

The following is my code.

import SwiftUI

struct ContentView: View {
	@State var selectedTab = 0
	@State var addTapped = false
	@State var refresh = false
	@State var people = [
		Person(name: "Alice", systemImage: "person.circle.fill"),
		Person(name: "Jane", systemImage: "person.circle.fill"),
		Person(name: "Dave", systemImage: "person.circle.fill"),
		Person(name: "Susan", systemImage: "person.circle.fill"),
		Person(name: "Robert", systemImage: "person.circle.fill"),
		Person(name: "Daniel", systemImage: "person.circle.fill")
	]
	
	var body: some View {
		VStack(alignment: .leading, spacing: 0) {
			ScrollView(.horizontal) {
				HStack(spacing: 20) {
					ForEach(0..<people.count, id: \.self) { num in
						VStack {
							let person = people[num]
							Image(systemName: person.systemImage)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(height: 32)
							Text(person.name)
								.fixedSize()
						}
						.foregroundColor(selectedTab == num ? Color.blue : Color.gray)
						.onTapGesture {
							self.selectedTab = num
						}
					}
				}
			}.padding(.horizontal, 10)
			
			Spacer()
				.frame(height: 2)
			Rectangle().fill(.gray)
				.frame(height: 1)
			TabView(selection: $selectedTab) {
				ForEach(0..<people.count, id: \.self) { num in
					let person = people[num]
					Text(person.name)
						.tag(person.id)
				}
			}
		}
	}
}

struct Person: Identifiable {
	let id = UUID()
	let name: String
	let systemImage: String
}

Muchos thankos.

Answered by Tomato in 761467022

I think I've fixed it.

import SwiftUI

struct ContentView: View {
	@State var selectedTab = 0
	@State var addTapped = false
	@State var refresh = false
	@State var people = [
		Person(name: "Alice", systemImage: "person.circle.fill"),
		Person(name: "Jane", systemImage: "person.circle.fill"),
		Person(name: "Dave", systemImage: "person.circle.fill"),
		Person(name: "Susan", systemImage: "person.circle.fill"),
		Person(name: "Robert", systemImage: "person.circle.fill"),
		Person(name: "Daniel", systemImage: "person.circle.fill")
	]
	
	var body: some View {
		VStack(alignment: .leading, spacing: 0) {
			ScrollView(.horizontal) {
				HStack(spacing: 20) {
					ForEach(0..<people.count, id: \.self) { num in
						VStack {
							...
						}
						.foregroundColor(selectedTab == num ? Color.blue : Color.gray)
						.onTapGesture {
							self.selectedTab = num
						}
					}
				}
			}.padding(.horizontal, 10)
			
			Spacer()
				.frame(height: 2)
			Rectangle().fill(.gray)
				.frame(height: 1)
			TabView(selection: $selectedTab) {
				ForEach(0..<people.count, id: \.self) { num in
					let person = people[num]
					Text(person.name)
						.tag(person.id)
				}
			}
		}
		.tabViewStyle(.page(indexDisplayMode: .never)) // <<<<<<<<<<<<<<<<<<<<<
		.onAppear { 
			UITabBar.appearance().isHidden = true
		}
	}
}

I think my topic is related to https://developer.apple.com/forums/thread/697197 .

Accepted Answer

I think I've fixed it.

import SwiftUI

struct ContentView: View {
	@State var selectedTab = 0
	@State var addTapped = false
	@State var refresh = false
	@State var people = [
		Person(name: "Alice", systemImage: "person.circle.fill"),
		Person(name: "Jane", systemImage: "person.circle.fill"),
		Person(name: "Dave", systemImage: "person.circle.fill"),
		Person(name: "Susan", systemImage: "person.circle.fill"),
		Person(name: "Robert", systemImage: "person.circle.fill"),
		Person(name: "Daniel", systemImage: "person.circle.fill")
	]
	
	var body: some View {
		VStack(alignment: .leading, spacing: 0) {
			ScrollView(.horizontal) {
				HStack(spacing: 20) {
					ForEach(0..<people.count, id: \.self) { num in
						VStack {
							...
						}
						.foregroundColor(selectedTab == num ? Color.blue : Color.gray)
						.onTapGesture {
							self.selectedTab = num
						}
					}
				}
			}.padding(.horizontal, 10)
			
			Spacer()
				.frame(height: 2)
			Rectangle().fill(.gray)
				.frame(height: 1)
			TabView(selection: $selectedTab) {
				ForEach(0..<people.count, id: \.self) { num in
					let person = people[num]
					Text(person.name)
						.tag(person.id)
				}
			}
		}
		.tabViewStyle(.page(indexDisplayMode: .never)) // <<<<<<<<<<<<<<<<<<<<<
		.onAppear { 
			UITabBar.appearance().isHidden = true
		}
	}
}
Removing More?
 
 
Q