При проектировании интерфейсов на управляемых формах 1С разработчики часто сталкиваются с задачей красивого распределения элементов по ширине экрана. Типичный сценарий: на форме должна быть одна общая горизонтальная группа, внутри которой одна подгруппа (или элемент) прижата к левому краю, а вторая — строго к правому.
По умолчанию платформа 1С стремится скомпоновать элементы один за другим, сдвигая их к левому краю. В этой статье мы подробно разберем, почему элементы «слетают» влево, как правильно настроить свойства родительских и дочерних групп, а также рассмотрим альтернативные лайфхаки и программные способы управления версткой.
Выясним причину, почему элементы часто сдвигаются влево, даже если вы указали для правой группы правое выравнивание. Дело в том, что по умолчанию родительская (общая) группа может не растягиваться на всю ширину доступного пространства формы. Если родительская группа сжата по размеру своего содержимого, то правая группа физически не может сдвинуться вправо — ей просто не хватает свободного места.
Для реализации классической схемы «Родительская группа (Горизонтальная) -> Левая группа -> Правая группа» выполним настройку по шагам:
Группировка в значение Горизонтальная (или Горизонтальная если возможно для лучшей адаптивности).РастягиватьПоГоризонтали в значение Да (Истина). Это ключевое свойство, которое заставит контейнер занять всю доступную ширину окна.РастягиватьПоГоризонтали в значение Нет (или Авто, чтобы группа занимала ровно столько места, сколько требуется ее содержимому).РастягиватьПоГоризонтали в значение Да. Это заставит правую группу расшириться на все оставшееся свободное пространство до правого края формы.ГоризонтальноеПоложение (или ГоризонтальноеПоложениеПодчиненных для элементов внутри группы) в значение Право.При такой комбинации настроек левая группа займет свой минимально необходимый размер, правая группа растянется до правого края окна, а всё ее содержимое послушно прижмется к правой границе. Для интерактивной проверки и настройки параметров верстки прямо в интерфейсе можно использовать обработку для редактирования свойств элементов формы в режиме предприятия.
Существует альтернативный и крайне популярный среди практикующих разработчиков прием. Он позволяет разнести элементы по краям без необходимости сложной настройки свойств растягивания у правых и левых групп. Этот способ отлично подходит, когда у вас на форме расположены не группы, а простые элементы управления (например, два поля ввода или две кнопки).
Рассмотрим этот прием по шагам:
РастягиватьПоГоризонтали в значение Да.Заголовок (сделаем его полностью пустым).РастягиватьПоГоризонтали в значение Да.Как это работает? Пустая декорация, имея признак растягивания, забирает себе абсолютно все свободное горизонтальное пространство формы. Она работает как своеобразная «пружина», которая расталкивает левый элемент к левому краю, а правый элемент — к правому.
Иногда структуру формы приходится формировать или дорабатывать динамически в коде (например, при создании универсальных отчетов или динамических форм ввода). Проанализируем, как настроить аналогичное поведение программно в модуле формы. Для ознакомления с готовой реализацией такого подхода подойдёт пример динамического добавления и удаления элементов формы.
Посмотрим на пример кода, который создает горизонтальную группу и корректно позиционирует элементы внутри нее:
// Создаем общую горизонтальную группу-родитель
ОбщаяГруппа = Элементы.Добавить("ГруппаГоризонтальная", Тип("ГруппаФормы"), ЭтаФорма);
ОбщаяГруппа.Вид = ВидГруппыФормы.ОбычнаяГруппа;
ОбщаяГруппа.Группировка = ГруппировкаПодчиненныхЭлементовФормы.Горизонтальная;
ОбщаяГруппа.РастягиватьПоГоризонтали = Истина;
// Добавляем левый элемент (не растягивается)
ЛевыйЭлемент = Элементы.Добавить("ДекорацияЛево", Тип("ДекорацияФормы"), ОбщаяГруппа);
ЛевыйЭлемент.Вид = ВидДекорацииФормы.Надпись;
ЛевыйЭлемент.Заголовок = "Элемент слева";
ЛевыйЭлемент.РастягиватьПоГоризонтали = Ложь;
// Добавляем правую группу (занимает все оставшееся пространство)
ПраваяГруппа = Элементы.Добавить("ГруппаПраво", Тип("ГруппаФормы"), ОбщаяГруппа);
ПраваяГруппа.Вид = ВидГруппыФормы.ОбычнаяГруппа;
ПраваяГруппа.РастягиватьПоГоризонтали = Истина;
ПраваяГруппа.ГоризонтальноеПоложениеПодчиненных = ГоризонтальноеПоложениеПодчиненныхЭлементовФормы.Право;
// Добавляем элемент внутрь правой группы
ПравыйЭлемент = Элементы.Добавить("ДекорацияПраво", Тип("ДекорацияФормы"), ПраваяГруппа);
ПравыйЭлемент.Вид = ВидДекорацииФормы.Надпись;
ПравыйЭлемент.Заголовок = "Элемент справа";
Для того чтобы интерфейс ваших управляемых форм выглядел профессионально на любых мониторах, рекомендуем учитывать несколько важных особенностей платформы 1С:
Объединенная у обеих дочерних групп. Это отключит жесткое сквозное выравнивание колонок платформой и позволит элементам выстраиваться независимо друг от друга.Горизонтальная для свойства Группировка родительского контейнера используйте Горизонтальная если возможно. В этом случае на широкоформатных мониторах элементы будут отображаться слева и справа, а на экранах мобильных устройств или планшетов правая группа красиво перенесется под левую, предотвращая появление неудобной горизонтальной прокрутки.МаксимальнаяШирина или используйте флаг АвтоМаксимальнаяШирина для растягивающихся групп.