При работе с менеджерами размещения семейства Layout в QML возникает много вопросов. Один из таких - почему для элементов Text не работает установка ширины width?

Например, следующий код не будет устанавливать ширину элементов Text:

RowLayout {

// Системное время

Text {

text: ourSystemTime

width: root.width*0.11

}

// Игровое время

Text {

text: ourGameTime

width: root.width*0.11

}

// Тип сообщения

Text {

text: ourMessageType

width: root.width*0.05

}

// Текст сообщения. Для текста сообщения ширина не задается

Text {

text: ourMessageText

}

}

Точнее, ширину (свойство width) элементов Text код установит, но она не будет влиять на размещение элемента в RowLayout. Кстати, если вместо элемента Text использовать Rectangle, то значение свойства width для Rectangle будет влиять на размещение в RowLayout.

То есть, если отладиться на Rectangle, а потом заменить прямоугольники элементами Text, то верстка в RowLayout разломается. Возможно, это объясняется тем, что Rectangle - это базовый примитив, а Text - это часть библиотеки контролов, в которой используется другие подходы к пониманию что такое свойства width/height.

Управиться с размещением полей типа Text внутри лайаута можно с помощью значений Layout.preferredWidth, Layout.minimumWidth, Layout.maximumWidth. Эти свойства напрямую говорят Layout-менеджеру какие значения ширины использовать при размещении элементов внутри лайаута. Выглядит это примерно так:

RowLayout {

// Системное время

Text {

text: ourSystemTime

Layout.preferredWidth: root.width*0.11

Layout.maximumWidth: Layout.preferredWidth

}

// Игровое время

Text {

text: ourGameTime

Layout.preferredWidth: root.width*0.11

Layout.maximumWidth: Layout.preferredWidth

}

// Тип сообщения

Text {

text: ourMessageType

Layout.preferredWidth: root.width*0.05

Layout.maximumWidth: Layout.preferredWidth

}

// Текст сообщения. Для текста сообщения ширина не задается

Text {

text: ourMessageText

Layout.fillWidth: true

}

}

Данный пример кода разместит четыре элемента Text слева-направо, причем ширина трех элементов будет зависеть от ширины более вышестоящего элемента root. Для четвертого элемента ширина в явном виде не задается, а указывается, что по ширине он должен занять все оставшееся доступное пространство.

Для справки, в менеджерах размещения семейства Layout используются следующие свойства:

• Layout.row - указывает строку, в которой располагается объект;
• Layout.column - указывает колонку, в которой располагается объект;
• Layout.rowSpan - указывает, на сколько строк должен быть растянут объект;
• Layout.columnSpan - указывает, на сколько колонок должен быть растянут объект;
• Layout.minimumWidth - минимальная ширина объекта в слое;
• Layout.minimumHeight - минимальная высота объекта в слое;
• Layout.preferredWidth - предпочтительная ширина объекта в слое;
• Layout.preferredHeight - предпочтительная высота объекта в слое;
• Layout.maximumWidth - максимальная ширина объекта в слое;
• Layout.maximumHeight - максимальная высота объекта в слое;
• Layout.fillWidth - заполнение по ширине;
• Layout.fillHeight - заполнение по высоте;
• Layout.alignment - выравнивание в слое;

Для лучшего понимания нужно отиметить, что слово preferred означает не только "предпочтительный" но и "то, к чему нужно стремиться". То есть preferredWidth и preferredHeight не просто "предпочтительный размер", а размер, к которому будет стремиться размер элемента.