Как настраивать отступы и интервалы между элементами в интерфейсе «Такси»?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

При разработке интерфейсов на управляемых формах в системе 1С:Предприятие 8.3 программисты часто сталкиваются с жесткими ограничениями платформы в части позиционирования элементов. Интерфейс «Такси» спроектирован таким образом, чтобы автоматически распределять контролы, минимизируя ручную верстку. Однако стандартных настроек «Горизонтальный интервал» и «Вертикальный интервал» часто бывает недостаточно, когда требуется реализовать сложный макет или создать значительные пустые пространства между полями ввода. Разберем подробно, какие инструменты и приемы позволяют обойти эти ограничения и добиться профессионального вида формы.

Использование декораций в качестве разделителей

Самый простой и популярный метод, упомянутый в обсуждении, — это использование элемента формы Декорация с видом Надпись. Проанализируем, как это работает на практике. Если нам нужно создать фиксированный зазор между двумя полями, мы можем вставить между ними пустую декорацию. Для того чтобы она выполняла роль «распорки», необходимо выполнить следующие действия:

  1. Добавим элемент Декорация (вид — Надпись).
  2. Очистим заголовок, чтобы надпись не отображала текст.
  3. Установим свойство РастягиватьПоГоризонтали в значение Ложь.
  4. Зададим конкретное число в поле Ширина (например, 2 или 5 единиц).

Таким образом, мы получим гарантированный отступ, который не будет схлопываться при изменении размеров окна. Если же нам нужно, чтобы элементы «разлетелись» по краям формы (например, одно поле слева, а другое — справа в широком окне), мы включим у пустой декорации свойство РастягиватьПоГоризонтали. В этом случае декорация сработает как пружина, занимая все свободное пространство между соседними элементами.

Управление отступами через невидимые группы

Рассмотрим ситуацию, когда нам нужно сгруппировать несколько элементов и задать им общий отступ от остальной части интерфейса. В этом случае эффективнее использовать не декорации, а вспомогательные Группы. Создадим обычную группу без заголовка и установим ее свойство Отображение в значение Нет. Такая группа становится невидимым контейнером. Посмотрим, какие преимущества это дает:

Настройка интервалов в свойствах группы

Разберем встроенные возможности платформы по управлению плотностью элементов. У каждого контейнера (форма или группа) есть свойства ГоризонтальныйИнтервал и ВертикальныйИнтервал. Важно понимать, что эти значения задаются в абстрактных единицах, принятых в 1С. Увеличение этих значений позволяет сделать форму более «воздушной». Для интерактивного подбора параметров отображения в пользовательском режиме подойдёт обработка для редактирования свойств элементов форм в режиме предприятия.

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


// Пример изменения интервалов группы программно
Элементы.ГруппаДанныеКлиента.ГоризонтальныйИнтервал = 2;
Элементы.ГруппаДанныеКлиента.ВертикальныйИнтервал = 3;

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

Выравнивание подчиненных элементов

В современных версиях платформы 8.3 появилось мощное свойство ВыравниваниеПодчиненныхЭлементов. Выясним, как оно помогает в верстке. Если мы поместим три поля в группу и установим выравнивание «Центр», платформа сама рассчитает необходимые отступы слева и справа, чтобы отцентрировать блок. Если выбрать «Прижать к обоим краям», элементы будут распределены равномерно по всей ширине группы. Это избавляет от необходимости вставлять множество пустых декораций-надписей.

Использование Поля HTML-документа для сложной верстки

Иногда возникают задачи, где стандартные средства Управляемых форм бессильны (например, специфические дашборды или сложные информационные панели). В таких случаях рассмотрим применение Поля HTML-документа. Внутри него можно использовать полноценный CSS для задания любых отступов (padding, margin). Для подготовки и проверки такой разметки можно использовать редактор HTML для управляемого интерфейса.

Посмотрим, как можно задать стиль для элементов внутри HTML-поля:


<div style="display: flex; justify-content: space-between; padding: 20px;">
    <div>Поле 1</div>
    <div>Поле 2</div>
    <div>Поле 3</div>
</div>

Важно: этот метод следует использовать как крайнее средство, так как он требует написания кода для синхронизации данных между HTML-формой и объектами 1С, а также может отличаться по внешнему виду от стандартных элементов «Такси».

Влияние масштабирования на отступы

Проанализируем важный нюанс: интерфейс «Такси» ориентирован на работу с разными масштабами (от 50% до 400%). Если мы используем жестко заданную Ширину в декорациях (например, 20 единиц), то при сильном увеличении масштаба пользователем этот отступ может стать чрезмерно огромным или привести к появлению горизонтальной прокрутки.

Рекомендуем придерживаться комбинированного подхода: использовать фиксированные небольшие отступы для отделения меток от полей и «резиновые» декорации (с включенным растягиванием) для распределения крупных блоков по ширине экрана. Это обеспечит адаптивность интерфейса под любые мониторы.

Резюме по шагам

Для создания качественных отступов в 1С рекомендуется следовать алгоритму:

  1. Сначала попробуйте настроить ГоризонтальныйИнтервал группы.
  2. Если нужно выровнять блок по центру или краям, используйте ВыравниваниеПодчиненныхЭлементов.
  3. Если требуются точечные отступы, вставьте Декорацию-надпись с фиксированной шириной и пустым заголовком.
  4. Для создания больших пустых пространств используйте Декорацию с включенным свойством РастягиватьПоГоризонтали.

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

← На главную