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

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

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

https://vk.com/video-219751701_456239237

VK Видео | YouTube | Rutube

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

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


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

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


Добавили класс и задали в нем фоновое изображение
Одно фоновое изображение применилось ко всем айтемам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладка локальных стилей активна

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

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

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

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

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

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

Как это сделать — читайте подробную инструкцию в статье Виджет Image и фоновое изображение: в чем разница?

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

Резюме

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

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

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