Работа с делегатами

Функциональные возможности использования делегатов в пользовательских интерфейсах приложений

ItemDelegate

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

# основная надпись 
text 
font 
color 
 
# вторичная надпись 
subText 
subFont 
subColor 
 
icon.source # ресурс иконки 
isFirst: false # отметка первой в списке записи 
isLast: false # отметка последней в списке записи 
showSeparator: !isLast # отображение разделителя 
indicatorSource # иконка индикатора (по умолчанию стрелка вправо) 
showIndicator: false # отображение индикатора (иконка в правой части компонента) 
backgroundColor: Rosa.Theme.bgColor # цвет фона 
bool wrapText: false 
bool elideText: true 
showPressedEffect: true

Пример

Три компонента располагаются в Column; такое расположение типично, например, для списка настроек или Menu. Здесь напрямую устанавливаются isFirst и isLast, что скругляет углы фигуры и влияет на отображение разделителя.

Column { 
    width: parent.width 
    spacing: 0 
 
    ItemDelegate { 
        width: parent.width 
        text: i18n("Item 1") 
        subText: i18n("SubText") 
        showIndicator: true 
        isFirst: true 
        icon.source: Rosa.Theme.icon('24/week-filled-color') 
    } 
 
    ItemDelegate { 
        width: parent.width 
        text: i18n("Item 2") 
        subText: i18n("SubText") 
        showIndicator: true 
        icon.source: Rosa.Theme.icon('24/week-filled-color') 
    } 
 
    ItemDelegate { 
        width: parent.width 
        text: i18n("Item 3") 
        subText: i18n("SubText") 
        showIndicator: true 
        isLast: true 
        icon.source: Rosa.Theme.icon('24/week-filled-color') 
    } 
}

Пример со списком ListView

ListView { 
    id: listView 
    width: parent.width 
    height: contentHeight 
    clip: true 
    model: 3 
 
    delegate: ItemDelegate { 
        width: ListView.view.width 
        text: i18n("Text") 
        subText: i18n("SubText") + "  " + (isFirst ? "isFirst" : isLast ? "isLast" : "") 
        isFirst: index === 0 
        isLast: index === ListView.view.count - 1 
        showIndicator: true 
        icon.source: Rosa.Theme.icon('24/week-filled-color') 
    } 
}

Пример кастомизации

ItemDelegate { 
    width: parent.width 
    text: i18n("Checkable") 
    subText: i18n("SubText") 
    color: "red" 
    subColor: "green" 
    showSeparator: false 
    showIndicator: true 
    indicatorSource: Rosa.Theme.icon(checked ? 'checkbox-small-active' : 'checkbox-small') 
    icon.source: Rosa.Theme.icon('24/week-color') 
    checkable: true 
}

CheckDelegate

Поле выбора основано на ItemDelegate.

SettingsContainer { 
    width: parent.width 
 
    CheckDelegate { 
        width: parent.width 
        text: i18n("Preset 1") 
    } 
 
    CheckDelegate { 
        width: parent.width 
        text: i18n("Preset 2") 
    } 
 
    CheckDelegate { 
        width: parent.width 
        text: i18n("Preset 3") 
        showSeparator: false 
    } 
}

ChipDelegate

Компонент содержит список Chip (кнопка) элементов с возможностью мультивыбора. Логика работы со списками аналогична ItemDelegate.

# основная надпись 
text 
font 
color 
 
bool isRadioGroup: false # режим эксклюзивного выбора 
var checkedIndexes: [] # список выбранных элементов 
int checkedIndex: checkedIndexes.length > 0 ? control.checkedIndexes[0] : -1 
var model # QML model для создания списка, поддерживаются текстовые данные 
 
# по аналогии с ItemDelegate 
bool isFirst: false 
bool isLast: false 
bool showSeparator: !isLast 
 
# снимает выбор с элементов 
function clear()

Пример с мультивыбором

ChipsDelegate { 
    id: delegate 
    width: parent.width 
    text: i18n("isFirst") 
    model: ["One", "Two", "Three"] 
    icon.source: Rosa.Theme.icon('24/week-dark') 
    isFirst: true 
}

Пример с Radio

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

ChipsDelegate { 
    id: delegateRadio 
    width: parent.width 
    text: i18n("isRadioGroup isLast") 
    model: ["One", "Two", "Three", "One", "Two", "Three", "One", "Two", "Three"] 
    isRadioGroup: true 
    isLast: true 
}

SwitchDelegate

Компонент – переключатель, адаптирован для работы с асинхронным кодом: сначала мы указываем, куда хотим переключить, а потом из данных поступает реальный ответ — переключились или нет.

bool value # сюда устанавливается реальный результат переключения 
bool updating # пока желаемое не равно реальным данным 
bool autoFreezing: false # блокировка элемента на переключение (по умолчанию - отключено) 
int freezingTimeout: 1000 # задержка на блокировку переключения (анти спам) 
bool wrapText: false # перенос текста 
bool elideText: true # троеточие если текст не умещается 
Component baseIcon # можно переопределить компонент иконки 
 
# сигнал выдает "пожелание" пользователя переключиться, используй всегда, как и value 
signal checkedUpdated(bool checked) 
 
# по аналогии с ItemDelegate 
string text 
font font 
color color 
 
string subText 
font subFont 
color subColor 
 
bool isFirst: false 
bool isLast: false 
bool showSeparator: !isLast

Пример

SwitchDelegate { 
    id: switcher 
    width: parent.width 
    text: i18n("Text colored") 
    subText: i18n("SubText") 
    color: "red" 
    subColor: "green" 
    showSeparator: false 
    icon.source: Rosa.Theme.icon('24/week-color') 
 
    value: asyncProcess.value # выставляем реальное значение 
 
    # пользователь пожелал переключиться 
    onCheckedUpdated: { 
        asyncProcess.setupValue(checked) 
    } 
}

RadioDelegate

Делегат с радиоиндикатором основан на ItemDelegate.

checkable: true 
showIndicator: true 
indicatorSource: Rosa.Theme.icon(checked ? 'radio-active' : 'radio')

Пример

ButtonGroup { 
    buttons: blockRadio.children 
    exclusive: true 
} 
 
Column { 
    id: blockRadio 
    width: parent.width 
    spacing: 0 
 
    RadioDelegate { 
        width: parent.width 
        text: i18n("Preset 1") 
        isFirst: true 
    } 
 
    RadioDelegate { 
        width: parent.width 
        text: i18n("Preset 2") 
    } 
 
    RadioDelegate { 
        width: parent.width 
        text: i18n("Preset 3") 
        isLast: true 
    } 
}

SliderDelegate

Делегат со слайдером. Работа и вид подобны ItemDelegate.

alias slider: slider # доступ к объекту слайдера QML Slider 
 
# по аналогии с ItemDelegate 
string text 
font font 
color color 
 
bool isFirst: false 
bool isLast: false 
bool showSeparator: !isLast

Пример

Значение слайдера устанавливается в лейбл делегата в виде real значения. Необходимые значения слайдера можно выставить через slider.

SliderDelegate { 
    width: parent.width 
    text: i18n("Default slider ") + ` (${slider.value.toFixed(2)})` 
    color: "red" 
    icon.source: Rosa.Theme.icon('24/week-filled-color') 
    slider.from: 0.0 
    slider.to: 1.0 
    slider.stepSize: 0.02 
}

TextFieldDelegate

Поле для ввода текста. Работа и вид подобны ItemDelegate.

# управление заголовком 
string title # по умолчанию заголовок видно если есть фокус или введенный текст (value) 
font titleFont 
color titleColor 
bool holdTitle: false # заголовок будет виден всегда 
bool digitsInput: false # влияет на вид виртуальной клавиатуры при вводе 
 
string errorText # текст ошибки 
bool showError: !!errorMessage 
 
string placeholderText # текст - заглушка 
alias value: textField.text # значение текста из элемента QML TextField 
 
alias textField: textField # доступ к полю ввода 
alias validator: textField.validator # доступ к проверке ввода 
 
bool hideClearButton: textField.readOnly # можно скрыть кнопку очистки 
 
# по аналогии с ItemDelegate 
string text 
font font 
color color 
 
bool isFirst: false 
bool isLast: false 
bool showSeparator: !isLast

Пример

Значение слайдера устанавливается в лейбл делегата в виде real значения. Необходимые значения слайдера можно выставить через slider.

ListView { 
    id: listView 
    width: parent.width 
    height: contentHeight 
    clip: true 
    model: 3 
 
    delegate: TextFieldDelegate { 
        width: ListView.view.width 
        placeholderText: i18n("Input text...") 
        isFirst: index === 0 
        isLast: index === ListView.view.count - 1 
        icon.source: Rosa.Theme.icon('24/week-filled-color') 
    } 
} 
 
TextFieldDelegate { 
    width: parent.width 
    placeholderText: i18n("Input text...") 
 
    onValueChanged: myLabel.text = value 
} 
 
TextFieldDelegate { 
    width: parent.width 
    title: i18n("Name contact") 
    placeholderText: i18n("Input text...") 
} 
 
TextFieldDelegate { 
    width: parent.width 
    title: i18n("Name contact (holdTitle)") 
    holdTitle: true 
    placeholderText: i18n("Input text...") 
}

PasswordFieldDelegate

Поле для ввода пароля основано на TextFieldDelegate.

bool hidePasswordButton # позволяет скрыть кнопку раскрытия пароля

Пример

Значение слайдера устанавливается в лейбл делегата в виде real значения. Необходимые значения слайдера можно выставить через slider.

PasswordFieldDelegate { 
    width: parent.width 
    errorMessage: isValidateFail ? passwordErrorMessage : "" 
} 
 
PasswordFieldDelegate { 
    width: parent.width 
    title: i18n("Пароль") 
    holdTitle: true 
    errorMessage: isValidateFail ? passwordErrorMessage : "" 
}

Поле ввода пароля

Поле ввода пароля с заголовком

Поле ввода пароля с текстом об ошибке