Если я установите стиль представления списка на .plain , то Hstack для изображения карусель пойдет на край экрана без иниции и гранича .insetGrouped . И .InsetGrouped предотвращает hStack от достижения края экрана.
Я пытаюсь найти способ получить форму хорошего секции, а также попросить изображения карусель.
Код: Выделить всё
import SwiftUI
struct ExampleImage: View {
var url: String
var body: some View {
AsyncImage(url: URL(string: url)!) { phase in
switch phase {
case .empty:
ProgressView()
.frame(width: 175, height: 225)
case .success(let image):
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 175, height: 225)
.clipped()
.cornerRadius(10)
case .failure:
Image(systemName: "photo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 175, height: 225)
.foregroundColor(.gray)
@unknown default:
EmptyView()
.frame(width: 175, height: 225)
}
}
}
}
struct AddPhotoView: View {
var body: some View {
Button(action: {}) {
VStack(spacing: 5) {
Image(systemName: "camera.fill")
.font(.system(size: 14))
Text("Add Photo").font(.caption2).bold()
}.frame(minWidth: 100, minHeight: 225)
.background(Color(.systemGray6))
.cornerRadius(10)
}
}
}
struct ImageGallery: View {
var body: some View {
ScrollView(.horizontal) {
HStack {
ExampleImage(url: "https://upload.wikimedia.org/wikipedia/commons/b/b1/Van-willem-vincent-gogh-die-kartoffelesser-03850.jpg")
ExampleImage(url :"https://upload.wikimedia.org/wikipedia/commons/8/87/Vincent_van_Gogh_-_Head_of_a_skeleton_with_a_burning_cigarette_-_Google_Art_Project.jpg")
ExampleImage(url: "https://upload.wikimedia.org/wikipedia/commons/6/66/VanGogh-starry_night_ballance1.jpg")
AddPhotoView()
}
.padding(.horizontal, 12)
}
}
}
#Preview {
NavigationStack {
VStack(spacing: 0) {
List {
Section(header: Text("Address")) {
Text("No Address Specified")
.foregroundColor(.secondary)
}
Section {
NavigationLink {
EmptyView()
} label: {
Label {
Text("Menu")
} icon: {
Image(systemName: "menucard")
.foregroundColor(.primary)
}
}
NavigationLink {
EmptyView()
} label: {
Label {
Text("Check-Ins")
} icon: {
Image(systemName: "clock.badge.checkmark")
.foregroundColor(.primary)
}
}
}
ImageGallery()
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
}
.listSectionSpacing(15)
}
// Enable this to have the image carousel expand to the full width of the screen
// .listStyle(.plain)
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("Place Name")
}
}
:
Подробнее здесь: https://stackoverflow.com/questions/789 ... iftui-list
Мобильная версия