Создание Line Select (в разработке)

Результат

Line Select представляет из-себя компонент состоящий из нескольких кнопок, и одномоментно может быть включена только одна из-них.

Мы создадим такой компонент, который сможет принимать на вход массив строк и для каждого элемента вектора будет создана отдельная кнопка.

Подготовка

Первое, что делается всегда, это наследование от класса Component (более подробно это описано в Создание собственных компонентов на базе класса Component ), создадим папку components рядом с main.cpp и добавим в него файл line_select.h со следующим содержанием:

// file line_select.h

#pragma once

#include "component.h"

using namespace Kit;

class LineSelect : public Component
{
public:
    LineSelect(const string& id, const string& classes = "");
    ~LineSelect() override;

public:
    static Component* create(const string& id, const string& classes = "");

    void setup();
};

И файл line_select.cpp:

// file line_select.cpp

#include "line_select.h"

LineSelect::LineSelect(const string& id_, const string& classes_)
        : Component(id_, ".line-select " + classes_)
{
    this->setup();
}

LineSelect::~LineSelect()
{
    
}

Component* LineSelect::create(const string& id_, const string& classes_)
{
    return new LineSelect(id_, classes_);
}

void LineSelect::setup()
{
    style("../components/style.css");
}

Стили для простоты будем размещать рядом с исходным кодом, так что создадим файл style.css в той же папке components и не забудем подключить стили к компоненту (более подробно это описано в Создание собственных компонентов на базе класса Component ).

Теперь все готово к созданию компонента. Все вышеприведенные действия будут совпадать при создании любого компонента на базе класса Component .

Как устроен Line Select

Line Select в любой момент может иметь только один выбранный элемент, так что нам нужно будет отслеживать это. Для этого будет использована пользовательская информация в компоненте (подробнее об этом на странице Начало работы).

Добавляем пункты

Для этого, в первую очередь, мы должны каким то образом получать массив строк для создания пунктов. Добавим в конструктор и метод create аргумент const vector<string>& items . Добавим в класс поле vector<string> items . В конструкторе пропишем следующее:

LineSelect::LineSelect(const string& id_, const vector<string>& items_, 
                       const string& classes_)
        : Component(id_, ".line-select " + classes_)
{
    this->items = items_;

    this->setup();
}

Изменим так же тело метода create :

Component* LineSelect::create(const string& id_, const vector<string>& items_,
                              const string& classes_)
{
    return new LineSelect(id_, items_, classes_);
}