ListView¶

// Declarative: the items and how one row looks (plain strings need no `.item`).
std::vector<std::string> fruits{"Apple", "Banana", "Cherry"};
ui::Control<ui::ListView<std::string>> list;
window.set_content(ui::ListView<std::string>{
    .items                = fruits,
    .selection_mode       = ui::SelectionMode::Single,
    .height               = 240.0f,
    .on_selection_changed = [&](std::optional<std::string> fruit)
    { std::println("selected {}", fruit ? *fruit : "nothing"); },
    .control              = list,
    .item                 = [](const std::string& fruit) -> ui::Spec {
        return ui::Text{.text = fruit};
    },
});

// Imperative:
auto stack = std::make_unique<ui::StackControl>(ui::Orientation::Vertical);
auto names = std::make_unique<ui::ListViewControl>();
names->set_items({"One", "Two", "Three"});
names->set_item_click_enabled(true);
names->on_item_click([](std::size_t i) { std::println("clicked {}", i); });
stack->add(std::move(names));

struct Contact
{
    int         id = 0;
    std::string name;
    std::string company;
    friend bool operator==(const Contact&, const Contact&) = default;
};
ui::Property<std::vector<Contact>> contacts{{{1, "Ada Lovelace", "Analytical"}, {2, "Grace Hopper", "Navy"}}};
ui::Property<std::string>          status{};

window.set_content(ui::ListView<Contact>{
    .items                = contacts,
    .key                  = &Contact::id,
    .height               = 400.0f,
    .on_selection_changed = [&](std::optional<Contact> contact)
    { status = contact ? "Selected " + contact->name : ""; },
    .item                 = [](const Contact& contact) -> ui::Spec
    {
        return ui::VerticalStack{.content = {
            ui::Text{.text = contact.name},
            ui::Text{.text = contact.company, .role = ui::TextRole::Caption},
        }};
    },
});

// Plain text needs no template.
ui::ListView<std::string>{.items = {"Inbox", "Drafts", "Sent"}};

ui::ListView{
    .header, .items, .key, .selected_index, .selected_indices, .item_height, .item_transitions,
    .selection_mode, .item_click_enabled, .item_invoked_enabled, .can_drag_items,
    .can_reorder_items, .allow_drop, .group_by, .sticky_group_headers,
    .items_updating_scroll_mode, .background, .border_brush, .border_thickness,
    .items_panel_vertical_alignment, .item_container_margin,
    .item_content_horizontal_alignment, .style, .margin, .width, .height, .min_width,
    .min_height, .max_width, .max_height, .horizontal_alignment, .vertical_alignment, .visible,
    .tool_tip, .enabled, .accessibility, .on_selection_changed, .on_item_click,
    .on_item_invoked, .on_drag_items_starting, .on_drag_items_completed, .on_items_reordered,
    .on_pointer_entered, .on_pointer_exited, .on_got_focus, .on_lost_focus, .on_key_down,
    .on_wheel, .control, .header_content, .footer_content, .item, .group_header_template,
    .item_context_menu
}

std::unique_ptr<Element> build()&&

// Declarative: the items and how one row looks (plain strings need no `.item`).
std::vector<std::string> fruits{"Apple", "Banana", "Cherry"};
ui::Control<ui::ListView<std::string>> list;
window.set_content(ui::ListView<std::string>{
    .items                = fruits,
    .selection_mode       = ui::SelectionMode::Single,
    .height               = 240.0f,
    .on_selection_changed = [&](std::optional<std::string> fruit)
    { std::println("selected {}", fruit ? *fruit : "nothing"); },
    .control              = list,
    .item                 = [](const std::string& fruit) -> ui::Spec {
        return ui::Text{.text = fruit};
    },
});

// Imperative:
auto stack = std::make_unique<ui::StackControl>(ui::Orientation::Vertical);
auto names = std::make_unique<ui::ListViewControl>();
names->set_items({"One", "Two", "Three"});
names->set_item_click_enabled(true);
names->on_item_click([](std::size_t i) { std::println("clicked {}", i); });
stack->add(std::move(names));

ListViewControl()