Как настроить NavigationSplitView с заголовком в SwiftUI
Я пытаюсь создать настраиваемый NavigationSplitView с заголовком и полностью настраиваемой боковой панелью в SwiftUI, аналогичной той, которая показана в этом примере боковой панели:
Проблема
Я пытаюсь воспроизвести боковую панель, как показано на эталонном изображении. Вместо этого моя реализация выглядит только так:
Цель
Я хочу создать боковую панель, позволяющую полную настройку, включая использование ScrollView вместо List и с заголовком навигации.
ожидаемый результат
Полностью настраиваемая боковая панель с заголовком, соответствующим эталонному изображению.
Фактический результат
Боковая панель не полностью настраиваема и не похожа на эталонное изображение.
Что я пробовал
Использование ScrollView на боковой панели вместо List. Пробуем разные подходы к List.
Минимальный код для воспроизведения:
import SwiftUI
import SwiftData
@main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.background(.white)
}
}
}
//
// ContentView.swift
// DeployApp
//
// Created by Lucas Sesti on 20/07/24.
//
import SwiftUI
import SwiftData
struct ContentView: View {
var body: some View {
NavigationSplitView {
List {
Text("Item 1")
Text("Item 2")
}
.navigationTitle("Caixa de Entrada")
} detail: {
Text("Detail view")
}
.navigationTitle("Titulo do detail view")
}
}
Я отредактировал и добавил минимальный код для воспроизведения
Это все, на что ты способен? В этом случае я предлагаю вам прочитать основы SwiftUI и пройти какое-нибудь руководство, см., например: Учебное пособие по SwiftUI.
Я ввожу в вопрос выше то, что уже пытался воспроизвести, полные коды не ставил, чтобы не делать вопрос слишком большим, и если это мой максимум, и я спрашиваю, почему вы не можете просто ответь на мой вопрос. Спасибо
Что вы подразумеваете под «полностью настраиваемой боковой панелью»? Вы имеете в виду, что хотите, чтобы пользователь мог добавлять в него элементы? Это отдельный вопрос, и его следует задать в отдельном посте (если это не дубликат).
Ответы 1
Первый снимок экрана выглядит так, как будто он работает на «Mac (разработано для iPad)», но кажется, что вы запускаете свое приложение на родной macOS, которая изначально не поддерживает это.
Вам следует добавить место назначения «Mac (разработано для iPad)» в настройках проекта и выбрать место назначения для запуска «Мой Mac (разработано для iPad)».
После этого на боковой панели появится заголовок «Caixa de Entrada». Чтобы получить заголовок подробного представления, необходимо переместить .navigationTitle("Titulo do detail view") внутрь замыкания detail: { ... }. Он не должен изменять NavigationSplitView.
Здесь я попытался воссоздать всю боковую панель с первого скриншота с кнопками «добавить», которые добавляют UUID в список.
struct ContentView: View {
@State var listItems: [UUID] = []
@State var selected: UUID?
var body: some View {
NavigationSplitView {
Group {
if listItems.isEmpty {
ContentUnavailableView {
Label("Seus Pensamentos Não Estruturados", systemImage: "tray.fill")
} description: {
Text("Registre tarefas e pensamentos conforme eles surgem. Mova-as para sua linha do tempo quando você estiver pronto para agendar.")
} actions: {
// I adjusted the color here with saturation and brightness
// so that this looks nice with the default blue accent color
// In your screenshot it seems like they changed their AccentColor
// asset in their asset catalog to a less saturated blue
Button {
listItems.append(UUID())
} label: {
Label("Nova Tarefa da Caixa de Entrada", systemImage: "plus.circle.fill")
.padding()
.foregroundStyle(Color.accentColor)
.brightness(0.3)
}
.background(
Color.accentColor.opacity(0.5),
in: RoundedRectangle(cornerRadius: 10)
)
.saturation(0.5)
}
} else {
List(selection: $selected) {
ForEach(listItems, id: \.self) {
Text("\($0)")
}
}
}
}
.navigationTitle("Caixa de Entrada")
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button {
listItems.append(UUID())
} label: {
Image(systemName: "plus.circle.fill")
}
}
}
} detail: {
Group {
if let selected {
Text("Details for \(selected)...")
} else {
ContentUnavailableView {
Text("Please select an item")
}
}
}
.navigationTitle("Titulo do detail view")
}
}
}
Выход:
Это действительно было все! Я тестировал его здесь на Mac (предназначенном для iPad), и он действительно выглядел так же, как на первом снимке экрана. Можно ли иметь настройку, подобную iPad, но изначально для macOS?
@LucasBuchallaSesti Вы всегда можете создать свой собственный с помощью Text(“some title”).font(.largeTitle), но, вероятно, он будет выглядеть не совсем так.
Покажите минимальный воспроизводимый код, который создает вашу проблему, см.: минимальный код. Покажите код, который вы пробовали и который не сработал, покажите код, который мы можем скомпилировать и запустить.