Index

联系人、城市选择这类「按字母分组的长列表」。右侧是索引轨，点按或拖动跳到对应分组；中间弹出当前键。

默认分组：

index 留空时按 title 归入上表。显式 "VIP" 这类多字符键会自成一组。

要不要虚拟列表？

侧栏只有字母/符号，创建成本可忽略。真正贵的是每一行。Index 的内容区默认就是虚拟 List。

用法

use arkit::shadcn::components::{Index, IndexItemSpec};

Index {
    items: vec![
        IndexItemSpec::new("support", "#", "*客服"),
        IndexItemSpec::new("rail-12306", "", "12306").with_description("铁路"), // → #
        IndexItemSpec::new("beijing", "B", "北京"),
    ],
    show_empty_indexes: false, // 隐藏没有数据的 A–Z
    on_select: move |item_index| {},
    on_index_change: move |letter: String| {},
}

IndexItemSpec::new(id, index, title) 的 id 必须在列表内唯一，并在改标题、描述或分组时保持稳定。未传 indexes 时轨的底稿是 #、A–Z。show_empty_indexes（默认 false）控制底稿里没有行的键要不要画在侧栏上。有数据但不在底稿里的键会追加到轨尾。

自定义渲染

行、组头、侧栏格子都可以换成自己的 RSX。用 use_callback 建 Callback：

let render_item = use_callback(|ctx: IndexItemContext| {
    rsx! { text { "{ctx.item.title}" } }
});
let render_header = use_callback(|ctx: IndexHeaderContext| {
    rsx! { text { "{ctx.index}" } }
});
let render_bar = use_callback(|slot: IndexBarSlot| {
    rsx! { text { "{slot.index}" } } // slot.empty 表示该组没有行
});

Index {
    items,
    render_revision: locale_revision,
    render_item: Some(render_item),
    render_header: Some(render_header),
    render_bar: Some(render_bar),
}

自定义 row/header 捕获的外部视觉输入变化、但 items 本身没有变化时，递增 render_revision 以定点失效虚拟内容。

侧栏拖动仍由 IndexBar 自己算，自定义格子请 hit_test_behavior: "none"。只要轨、列表自己管时也可以单独用 IndexBar。

Props

Index

IndexBarSlot