Почему при изменении фона айтема в независимой структуре он меняется у всех айтемов?

Иногда возникает такая ситуация: вы меняете фоновое изображение у одного айтема в виджете с независимой структурой, а оно меняется сразу у всех айтемов. Разберемся, почему так получается и как это исправить.

Смотрите видео:

Kinescope
VK Video
RuTube
YouTube
Vimeo

Почему возникает проблема

Обычно мы создаем независимую структуру в виджете с несколькими айтемами (например, в блок-листе), чтобы сделать разный дизайн айтемов — например, разную высоту карточек.

Применяем независимую структуру у блок-листа

Но если вы к тому же назначите класс для айтема или элемента внутри него, а затем добавите фоновое изображение в этом классе, то это будет ошибкой. Фоновое изображение применится ко всем айтемам, потому что у них один и тот же класс.

Добавили класс и задали в нем фоновое изображение

Если вы хотите сделать разные фоновые изображения у объектов, то нельзя задавать их в классе.

Решения проблемы

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

Рекомендуем использовать другие варианты:

Вариант 1: Локальные стили вместо классов

Удалите фоновое изображение из класса.

Удаляем фоновое изображение, нажав –

Перейдите на вкладку локальных стилей.

Кликаем на метку локальных стилей

Задайте фоновые изображения через эту вкладку для каждого элемента.

Задаем фоновое изображение в локальных стилях

У каждого элемента задаем свое фоновое изображение в локальных стилях

Готово! Мы настроили разные фоновые изображения для айтемов.

Важно: убедитесь, что вы находитесь на вкладке локальных стилей при настройке изображений.

Вариант 2: Использование виджета Image

Удалите фоновое изображение из класса.

Удаляем фоновое изображение, нажав –

Добавьте в каждый айтем виджет Image.

Добавляем в каждый айтем виджет Image

Настройте размер Image и меняйте изображение по двойному клику в каждой карточке отдельно.

Как это сделать — читайте подробную инструкцию в статье

Виджет Image и фоновое изображение: в чем разница?

Когда вы добавляете изображение через виджет Image, это не влияет на настройки класса. Поэтому у каждого айтема будет свое изображение. Рекомендуем использовать этот вариант, т.к. он удобнее для работы.

Резюме

Два способа добавить разные изображения для айтемов при независимой структуре виджета:

Использовать локальные стили вместо классов для назначения фоновых изображений.

Добавить виджет Image в каждый айтем и настраивать изображения индивидуально.

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