Как отображать значки в верхней части панелей вкладок?
У меня есть правая боковая панель в окне. Внутри этой правой боковой панели находятся 4 панели вкладок. Значки элементов управления вкладками (верхняя вкладка, а не тело) не отображаются.
struct RightPanelView: View {
var body: some View {
VStack {
TabView {
VStack{
someView1( )
someView2( )
}
.tabItem{ MyImage( "pencil" )} // TODO These icons do not show up
.background(Color.purple.opacity(0.2))
VStack { someView3( dm )}
.tabItem{ MyImage( "clock" )}
.padding( 0 )
VStack { someView4( dm )}
.tabItem{ MyImage( "circle" )}
.padding( 0 )
}
}
}
Я знаю, что имена систем верны, поскольку чуть выше у меня есть ряд кнопок с такими же значками. Раньше я использовал Image(), и у него та же проблема.
Вот как это выглядит:
Редактировать-1
Это пример FileMaker
Я не понял How do I bring that particular tab panel forward, удалю свой комментарий.
Я перефразирую вопрос.
@workingdogsupportUkraine Можете ли вы взглянуть на это еще раз?
Я думаю, что это еще одна ошибка SwiftUI, из-за которой изображения/значки не отображаются в элементах tabItems. При использовании метки отображается только текст.
@workingdogsupportUkraine Можете ли вы предложить другой способ сделать это? Я бы предпочел иметь значки, если это возможно. Возможно, стоит избавиться от вкладок и использовать кнопки, отображающие панели без вкладок. Например, FileMaker, который, конечно, не является приложением Swift.
Ответы 1
Вместо использования TabView вы можете создать собственную эквивалентную систему,
например, как в этом примере кода, настройте внешний вид по мере необходимости.
struct ContentView: View {
var body: some View {
NavigationSplitView(sidebar: {
Text("sidebar")
},
detail: {
RightPanelView()
})
}
}
enum TabSelection: String {
case pencil, clock, circle
}
struct RightPanelView: View {
@State private var selectedTab = TabSelection.pencil
var body: some View {
VStack {
HStack {
Button { selectedTab = .pencil } label: { Image(systemName: "pencil") }
.border(selectedTab == .pencil ? .blue : .clear)
Button { selectedTab = .clock } label: { Image(systemName: "clock") }
.border(selectedTab == .clock ? .blue : .clear)
Button { selectedTab = .circle } label: { Image(systemName: "circle") }
.border(selectedTab == .circle ? .blue : .clear)
}.padding(.top, 10)
Spacer()
switch selectedTab {
case .pencil: Text("someView0")
case .clock: Text("someView1")
case .circle: Text("someView2")
}
Spacer()
}
}
}
Или это:
enum TabSelection: String, Identifiable, CaseIterable {
case pencil, clock, circle
var id: Int {
switch self {
case .pencil: return 1
case .clock: return 2
case .circle: return 3
}
}
}
struct RightPanelView: View {
@State private var selectedTab = TabSelection.pencil
var body: some View {
VStack {
HStack {
ForEach(TabSelection.allCases) { tab in
Button { selectedTab = tab } label: { Image(systemName: tab.rawValue) }
.overlay(selectedTab == tab ? RoundedRectangle(cornerRadius: 5)
.foregroundStyle(.blue).opacity(0.3) : nil)
}
}.padding(.top, 10)
Spacer()
switch selectedTab {
case .pencil: Text("someView0")
case .clock: Text("someView1")
case .circle: Text("someView2")
}
Spacer()
}
}
}
ок, только что увидел этого, Тай. Я изучу это в следующий раз, когда сяду программировать. Я разделил представления на несколько частей, поэтому мне нужно будет выяснить, как отображать несколько представлений на одной панели, но я изучу это.
Хорошо, второе предложение определенно ЛУЧШЕЕ решение. Я запустил его примерно за 5 метров. Я поместил ответ в повторно используемую структуру PanelTabStyle: ButtonStyle. Ваше перечисление также должно будет расширить строку, если вы хотите использовать символы SF с точками в них (случай someTab = "some.Icon". Мне нужно использовать индивидуальные размеры и цвета значков, и сейчас я дорабатываю внешний вид.
Если мой ответ вам помог, примите его, отметив галочку рядом с ним, она станет зеленой. Обратите внимание, что мое перечисление расширяется String.
@workingdogsupportUkraine Привет!! Я не пытаюсь «выбрать вкладку». Этот запрос пытается отобразить значки на вкладке. Чтобы было ясно, не в основной части вкладки, а в небольшом фрагменте, который отображается в верхней части тела. Этот элемент использовался для вывода определенной панели вкладок вперед. Я постараюсь предоставить снимок экрана.