item_list

Her biri açılabilen ögelerin bir listesi. item_list; “siparişlerimi göster”, “hangi bedenler stokta”, “geçen ay ne satın aldım” sorularının yanıtıdır. Öge başına bir satır, sağda bir değer ve ögeyi detayına açan bir dokunma hareketi.

Katalogda başparmakla dokunması hâlâ rahat olan en yoğun bloktur.

Aero Glide 2, 43 numaraSipariş 1042 · dağıtıma çıktı

$129

Court Low, 42 numaraSipariş 1039 · 12 Ağu teslim edildi

$95

Trail Circuit, 44 bedenSipariş 1017 · 2 Tem teslim edildi

$149

Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.

Flutter SDK ve Web SDK ile, her ikisi de 0.1.0 sürümünden itibaren yerel olarak render edilir.

Ne zaman kullanılmamalı

Ürünlere göz atmak için kullanmayın. Bir liste satırı görsele 40pt yer ayırır ve rozet için alan bırakmaz; görselin satışı yaptığı durumlar için product_cards bulunur.

Sütunlar arasında karşılaştırılması gereken sayılar için kullanmayın; bunun için table vardır. Zaman içindeki durum sırası için de kullanmayın; bunun için order_tracker vardır.

Props

Her blok ayrıca type ve 1 ila 300 karakter uzunluğunda zorunlu bir fallback_text taşır.

Prop	Tür	Zorunlu	Kısıtlamalar
`items`	array	Evet	1 ila 20 öğe.
`items[].image_url`	string	Hayır	Yalnızca https.
`items[].title`	string	Evet	1 ila 120 karakter.
`items[].subtitle`	string	Hayır	En fazla 200 karakter.
`items[].trailing`	string	Hayır	En fazla 40 karakter. Tablosal rakamlarla işlenir.
`items[].action`	action	Hayır	`{ kind: "reply", text }` veya `{ kind: "open_url", url }` veya `{ kind: "navigate", route }` veya `{ kind: "call", phone }` veya `{ kind: "copy", text }` veya `{ kind: "add_to_calendar", title, starts_at }`. Bkz. Actions. Bir yanıt sayfasında her satır kendi detayını açar ve buradaki bir `reply`, o detayın yanıtladığı sorudur; bir `open_url` ise bunun yerine bağlantıyı açar. Bir detay sayfasında belirtilmezse satıra dokunulamaz.
`items[].amount`	object	Hayır	Yok
`items[].amount.value`	string	Evet	1 ila 30 karakter.
`items[].amount.tone`	`positive` \| `negative` \| `neutral`	Hayır	Yok
`items[].date_label`	string	Hayır	En fazla 24 karakter.
`items[].status`	object	Hayır	Yok
`items[].status.label`	string	Evet	1 ila 24 karakter.
`items[].status.tone`	`success` \| `warning` \| `error` \| `neutral`	Hayır	Yok
`items[].group`	string	Hayır	En fazla 40 karakter.
`items[].highlight`	boolean	Hayır	Yok
`items[].rank`	integer	Hayır	1 ila 999.
`items[].file_type`	`pdf` \| `csv` \| `image` \| `doc`	Hayır	Yok

Ağ üzerinde

{
  "id": "blk_03",
  "type": "item_list",
  "fallback_text": "Two recent orders: 1042 and 1039.",
  "props": {
    "items": [
      {
        "image_url": "https://cdn.example.com/aero-glide-2.jpg",
        "title": "Aero Glide 2, size 43",
        "subtitle": "Order 1042 · out for delivery",
        "trailing": "$129",
        "action": {
          "kind": "reply",
          "text": "Track order 1042"
        }
      },
      {
        "image_url": "https://cdn.example.com/court-low.jpg",
        "title": "Court Low, size 42",
        "subtitle": "Order 1039 · delivered 12 Aug",
        "trailing": "$95",
        "action": {
          "kind": "reply",
          "text": "Return order 1039"
        }
      }
    ]
  }
}

Etkileşim

Bir yanıt sayfasında bir satır kendi detayına açılır: satırın görseli, başlığı ve değeri tek seferde belirecek şekilde bir sheet yukarı kayar, ardından detay ulaştıkça gösterilir. Bir reply aksiyonunun metni, detayın sorduğu soru hâline gelir. Aksiyonu bir bağlantı olan satır bunun yerine bağlantıyı açar. Bir detay sayfasında bir satır, action değerinin belirttiği işlemi yapar; aksiyonu olmayan bir satır ise düz içeriktir: basma tepkisi yoktur, buton rolü yoktur. Bir aksiyon, derlemenin bildirdiği herhangi bir türde olabilir; bkz. Actions.

Kayıtlar

En fazla 20 satır; 8 satırdan fazlası bir Show more altında katlanır. amount, trailing yerine geçer ve tonu bir işaret olarak algılanır. date_label başlığın yanında yer alır, status küçük bir hap biçimindedir, aynı group değerine sahip ardışık satırlar tek bir başlığı paylaşır, rank bir sayı sütunu ekler, highlight kullanıcının kendi satırını işaretler ve file_type görsel yerine bir belge rozeti çizer. Flutter 0.40.0 ve Web 0.17.0 sürümlerinden beri.

Durumlar

Durum	SDK ne çizer
Yükleniyor	Gerçek satır yüksekliğinde, küçük resim artı iki metin çubuğundan oluşan üç satır.
Boş	Boş bir `items` dizisi, 2pt kenarlıklı ince bir şerit yerine plakanın içinde `fallback_text` render eder.
Bozuk görsel	Küçük resim alanı, bozuk görsel glifi içeren gömük bir dikdörtgen barındırır. Asla bir hatadan ayırt edilemeyen sessiz gri bir kare bırakmaz.

Erişilebilirlik

fallback_text, her satırı tek tek tekrarlamak yerine kaç satır olduğunu ve ne olduklarını belirtmelidir: “Son iki sipariş: 1042 ve 1039.” Her satır kendi içeriğini seslendirir.