iOS 27'de SwiftUI List Sıralama: reorderable() ve Swipe Actions

Yıllarca "Kullanıcıların bir SwiftUI list'ini yeniden sıralamasına nasıl izin veririm?" sorusunun cevabı aynıydı: bir List içindeki ForEach'e .onMove ekleyin, bir EditButton koyun ve index offset'lerini modelinize geri çevirin. Bu yalnızca List'te çalışıyordu ve edit mode ile birlikte geliyordu. Bu rehber, iOS 27'deki SwiftUI list sıralama API'sini anlatıyor; bu API her container'da çalışıyor ve ikisine de ihtiyaç duymuyor.

iOS 27, List'e özgü ikinci bir sınırı da kaldırıyor: swipe actions. İki değişiklik de WWDC26'dan geliyor ve Apple'ın SwiftUI referansında belgelenmiş durumda. Bu yazı o dokümantasyona, Apple'ın Code-along: Build powerful drag and drop in SwiftUI oturumuna ve iOS geliştiricisi @sarunw'nun paylaşımlarına dayanıyor. Bu API'ler iOS 27.0 ile geldi; ayrıntılar sürümler arasında değişebilir.

iOS 27'de bir SwiftUI list'i nasıl sıralanır?

İki modifier'a ihtiyacınız var. @sarunw'nun özetlediği gibi iOS 27, ForEach'e kendi sürükleyerek sıralama özelliğini veriyor: onu .reorderable() ile işaretleyin ve List'e .reorderContainer ekleyin. "No .onMove. No edit mode." (Ne .onMove ne edit mode.)

• reorderable(), view'ları kullanıcılar tarafından taşınabilen ForEach'e (herhangi bir DynamicViewContent'e) eklenir.
• reorderContainer(for:isEnabled:move:) container'a eklenir ve sürüklemenin kapsamını belirler. Öğe türünüzü ve değişikliği alan bir move closure'ı verirsiniz.

struct TaskListView: View {
    @State private var tasks: [TaskItem] = TaskItem.samples

    var body: some View {
        List {
            ForEach(tasks) { task in
                TaskRow(task: task)
            }
            .reorderable()
        }
        .reorderContainer(for: TaskItem.self) { difference in
            tasks.apply(difference)
        }
    }
}

TaskItem, Identifiable'dır ve Apple'ın rehberi Hashable ve Sendable olan bir ID türü istiyor. apply(_:) çağrısı bizim kendi yardımcımız, bir sonraki bölümde gösteriliyor; SwiftUI diziler için böyle bir yöntem belgelemiyor.

Apple etkileşimin kendisini de tarif ediyor: kullanıcı bir view'u sürükleme hareketiyle kaldırır, sistem bırakılabilecek yere bir placeholder koyar, placeholder sürüklemeyi takip eder ve bırakıldığında sistem move'u çağırır. Hareket kodu veya animasyon yazmazsınız.

Container'ın bir List olması gerekmiyor. Apple'ın dokümantasyonu onun bir list, stack, grid veya özel bir layout olabileceğini söylüyor. Apple'ın kendi örneği .reorderContainer'ı düz bir VStack'e uyguluyor; WWDC26 oturumu ise oyun kartlarından oluşan bir HStack kullanıyor.

Sıralama closure'ı verilerimi nasıl günceller?

move closure'ı bir ReorderDifference alır. Bu değer değişikliği index'e göre değil, kimliğe göre tarif eder:

ID'lerle çalışmanın pratik bir faydası var. Apple'ın rehberi öğeleri "dizide bulut senkronizasyonu gibi başka değişiklikler aynı anda gerçekleşse bile" taşıyabileceğinizi belirtiyor, çünkü bir ID dizi değiştikten sonra da doğru öğeyi gösterir. .onMove'dan gelen bir IndexSet bunu yapmaz.

Tek koleksiyonlu bir difference'ı bir diziye uygulamanın bir yolu şöyle. Taşınan öğeleri çıkarır ve seçim sırasıyla hedefe yeniden ekler:

@available(iOS 27.0, *)
extension Array where Element: Identifiable, Element.ID: Sendable {
    mutating func apply(
        _ difference: ReorderDifference<Element.ID, ReorderableSingleCollectionIdentifier>
    ) {
        let moved = difference.sources.compactMap { id in
            first { $0.id == id }
        }
        removeAll { difference.sources.contains($0.id) }

        switch difference.destination.position {
        case .before(let id):
            let index = firstIndex { $0.id == id } ?? endIndex
            insert(contentsOf: moved, at: index)
        case .end:
            append(contentsOf: moved)
        }
    }
}

Generic tür, closure'ı ReorderDifference<Item.ID, ReorderableSingleCollectionIdentifier> alan tek koleksiyonlu overload ile eşleşiyor. Bu yardımcıyı bir başlangıç noktası olarak görün ve kendi modelinizle test edin.

Bölümler arasında sıralama

Bölümlere ayrılmış veride her ForEach'e reorderable(collectionID:) ile bir tanımlayıcı verin ve bölümleri tanımlayan türle birlikte reorderContainer(for:in:isEnabled:move:) kullanın. Kullanıcılar böylece öğeleri bölümlerin içinde ve arasında taşıyabilir; destination.collectionID de hangi bölümün onları aldığını söyler.

List {
    ForEach(model.sections) { section in
        Section(section.name) {
            ForEach(section.reminders) { reminder in
                ReminderView(reminder)
            }
            .reorderable(collectionID: section.id)
        }
    }
}
.reorderContainer(for: Reminder.self, in: ReminderModel.Section.ID.self) { difference in
    model.apply(difference: difference)
}

Bu, Apple'ın dokümantasyon örneğini yansıtıyor; model.apply(difference:) sizin modelinizin kodu. ForEach'iniz id dışında bir ID kullanıyorsa itemID: overload'ları \.databaseID gibi bir key path alır.

reorderable(), onMove ve EditButton'dan nasıl farklı?

Eski kalıp hâlâ çalışıyor. Geçiş yapmadan önce tam olarak neyin değiştiğini bilmekte fayda var:

Hacking with Swift'in uzun süredir yayında olan rehberi klasik kurulumu gösteriyor: ForEach'te onMove(perform:) ve sürükleme tutamaçlarını göstermek için toolbar'da bir EditButton. Apple'ın onMove dokümantasyonu closure argümanlarını alttaki koleksiyondaki offset'ler olarak tanımlıyor; eski kodun genellikle move(fromOffsets:toOffset:) ile bitmesinin nedeni bu.

isEnabled parametresi gerçek uygulamalarda işe yarar. Apple'ın rehberi senkronizasyon sırasında sıralamayı kapatmayı öneriyor, örneğin isEnabled: !model.isSaving.

Oturum, Solitaire örneğinden bir tasarım ipucu da ekliyor: bazı öğeleri sabit tutmak için onları .reorderable() olmayan ikinci bir ForEach'e ayırın. Yalnızca işaretlediğiniz içerik kaldırılabilir. Apple'ın dokümantasyonu aynı ForEach'te .onMove ile .reorderable()'ı birleştirmeyi tarif etmiyor; bu yüzden birini seçin.

iOS 27'de swipe actions'ı List dışında kullanabilir miyim?

Evet. @sarunw bunu basitçe ifade ediyor: "Swipe actions used to need a List row. In iOS 27 any view can have them." (Swipe actions eskiden bir List satırı gerektiriyordu; iOS 27'de her view'da olabiliyor.) Bunu mümkün kılan parça swipeActionsContainer().

Her satıra .swipeActions'ı yine tam olarak bir List'teki gibi yazarsınız. Ardından satırları tutan ScrollView'a, LazyVStack'e veya başka bir container'a .swipeActionsContainer() uygularsınız:

ScrollView {
    LazyVStack {
        ForEach(items) { item in
            ItemRow(item)
                .swipeActions {
                    Button("Delete", role: .destructive) {
                        delete(item)
                    }
                }
        }
    }
}
.swipeActionsContainer()

Apple'ın dokümantasyonu container'ın neleri koordine ettiğini listeliyor:

• Aynı anda yalnızca bir satırın swipe actions'ı açılır.
• Container'ı kaydırmak açık eylemleri kapatır.
• Etkin satırın dışına dokunmak onun eylemlerini kapatır.

List bunların hepsini zaten yapıyor; bu yüzden Apple modifier'ı bir List'e uygulamanın etkisiz (no-op) olduğunu söylüyor. Majid Jabrayilov'un yazısı da aynı kurala varıyor: List dışındaki her şey container modifier'ına ihtiyaç duyar.

iOS 27 ayrıca swipeActions(edge:allowsFullSwipe:content:onPresentationChanged:)'ı ekliyor. Closure'ı bir satırın eylemleri göründüğünde true, kapatıldığında false alır. Apple bunu, eylemler gösterilirken satırı soluklaştırmak veya çevredeki arayüzü güncellemek için kullanmayı öneriyor.

Kontrol edilmesi gereken bilinen sorunlar

Apple'ın forumlarındaki iki geliştirici raporunu kendi build'inizde test etmekte fayda var. Biri, sağdan sola yerleşimlerde eylemlerin aynalanmış kenarda göründüğünü ama hareketin hâlâ soldan sağa yönü beklediğini söylüyor. Diğeri, List dışında swipe actions içeriğinin state değiştiğinde yeniden değerlendirilmediğini, bu yüzden bir Pin başlığının satır yeniden oluşturulana kadar Unpin'e dönmeyebileceğini söylüyor. Bu yazı yazılırken iki başlıkta da Apple'dan bir yanıt yoktu.

Bu API'ler eski iOS sürümlerinde çalışır mı?

Hayır. reorderable(), tüm reorderContainer overload'ları, swipeActionsContainer() ve onPresentationChanged overload'ı iOS 27.0, iPadOS 27.0, Mac Catalyst 27.0, macOS 27.0, visionOS 27.0 ve watchOS 27.0'dan itibaren kullanılabilir olarak belgelenmiş. WWDC26 oturumu sıralama API'lerini "sürükle bırakı destekleyen tüm Apple platformlarında yeni kullanılabilir" olarak tanımlıyor.

iOS 26 veya daha eskisini destekliyorsanız #available ile dallanın ve eski yolu koruyun:

@ViewBuilder
private var taskList: some View {
    if #available(iOS 27.0, *) {
        List {
            ForEach(tasks) { TaskRow(task: $0) }
                .reorderable()
        }
        .reorderContainer(for: TaskItem.self) { tasks.apply($0) }
    } else {
        List {
            ForEach(tasks) { TaskRow(task: $0) }
                .onMove { tasks.move(fromOffsets: $0, toOffset: $1) }
        }
        .toolbar { EditButton() }
    }
}

Eski sürümlerde List dışındaki swipe actions'ın bir yedeği yok; Nil Coalescing, iOS 27'den önce bunların bir LazyVStack veya grid'deki satırlarda hiçbir etkisi olmadığını belirtiyor. Oralarda bu satırları bir List'te tutun veya aynı eylemleri bir context menu'de sunun.

Bunun iPhone Duo'ya faydası ne?

iPhone Duo'da iç ekran bir iPad gibi regular yatay size class bildirirken dış ekran compact kalır (iPhone Duo size class'ları rehberimize bakın). Birçok uygulama bu ekstra genişliğe tek sütunlu bir List yerine bir grid veya özel bir layout ile karşılık veriyor.

iOS 27'ye kadar bu tercih size özelliklere mal oluyordu. Kartlardan oluşan bir LazyVGrid'in yerleşik sıralaması ve swipe actions'ı yoktu; bu yüzden iç ekranda grid'e geçmek ikisini de elle yeniden yazmak demekti. Artık bir size class geçişi dış ekranda bir List, iç ekranda bir grid gösterse de aynı .reorderable() ve .swipeActions kodu çalışıyor:

let columns = [GridItem(.adaptive(minimum: 220))]

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(boards) { board in
            BoardCard(board: board)
        }
        .reorderable()
    }
}
.reorderContainer(for: Board.self) { boards.apply($0) }

Apple'ın rehberi sıralamanın yalnızca container içindeki taşımaları kapsadığını belirtiyor. Öğeleri uygulamanızın başka bölümlerine sürüklemek veya diğer uygulamalardan içeri almak, dragContainer(for:in:_:) ve dropDestination(for:isEnabled:action:) ile yapılan ayrı bir adım. İç ekran ArrangementView ile iki paneli yan yana gösteriyorsa bölmenin kendisini ArrangementView rehberimiz anlatıyor.

Önemli çıkarımlar

• iOS 27'de bir ForEach'te .reorderable() ile container'ında .reorderContainer(for:), edit mode ve .onMove olmadan sürükleyerek sıralama sağlar.
• Container bir List, stack, grid veya özel layout olabilir.
• move closure'ı bir ReorderDifference alır: taşınan ID'ler sources'ta, hedef ise .before(_:) veya .end olan bir destination'da. Bunu dizinize kendiniz uygulayın.
• Öğeleri bölümler arasında taşımak için reorderable(collectionID:) ve reorderContainer(for:in:) kullanın.
• Swipe actions artık List dışında çalışıyor; ScrollView'a veya layout'a .swipeActionsContainer() ekleyin.
• Buradaki her şey iOS 27.0 ve sonrası için; bu yüzden #available ile koruyun ve yedek olarak .onMove'u tutun.

List'ler özenli bir arayüzün yalnızca yarısı; satırların içindeki metin de önemli. Sırada iOS 26'da SwiftUI satır yüksekliği rehberimiz var. iPhone Duo'dan en iyi şekilde yararlanan uygulama ve oyunlar için Built for the fold sayfasına göz atın.