Некоторое время назад в одном из обсуждений я упомянул о том, что контрол «a-la ribbon» (который был использован в MS Office 2007 для организации меню) легко и непринуждённо реализуется средствами Qt.

Я не хочу спорить о том, удобен ribbon или нет (сам я больше склоняюсь ко второму мнению). Но на его примере можно отлично раскрыть возможности каскадных таблиц стилей для Qt (которые были представлены в Qt 4.2), чем я и займусь. Сразу прошу прощения: я не дизайнер, поэтому с точки зрения эстетики мой QRibbon скорее всего не дотянет до своего собрата от МС, но дизайнеры в МС, полагаю, в своей области превосходят меня на 2 головы, да и человеко-часов, думаю, там было затрачено в слегка побольше. Я же всего лишь демонстрирую общий принцип и базовые возможности.

Так как я сейчас изучаю язык Python, то для демонстрации был выбран именно он, но для C++ всё делается абсолютно так же. Заранее прошу прощения: Python я только-только изучаю, поэтому код может быть полон корявостей, так что прошу больно не пинать :)

Итак, начнём!

Создаём скелет


Возьмём стандартный виджет QTabWidget в качестве основы, т.к. он сам тут напрашивается. Страницы будем делать из виджетов, имеющих горизонтальный лэйаут (QHBoxLayout), последний элемент которого — QSpacerItem (не знаю, как назвать его по-русски, но это такая невидимая фиговина, которая заполняет свободное пространство :)).

#!/usr/bin/python

from PyQt4 import Qt, uic
import sys

# Class that represents a ribbon page
class Tab(Qt.QWidget) :
	def __init__(self) :
		Qt.QWidget.__init__(self)

		# create the spacer and the layout and set it as a widget main layout
		self.spacer = Qt.QSpacerItem(10, 10, Qt.QSizePolicy.Expanding)
		self.layout = Qt.QHBoxLayout()
		self.layout.addSpacerItem(self.spacer)
		self.setLayout(self.layout)

# Class that represents a ribbon
class QRibbon(Qt.QTabWidget) :
	def __init__ (self) :
		Qt.QTabWidget.__init__(self)
		self.resize(450, 170)

		# storage for tabs
		self.tabs = dict()

	def addTab(self, tabName) :
		# check if tab with this name already exists
		if not tabName in self.tabs :
			newTab = Tab()
			self.tabs[tabName] = newTab
			Qt.QTabWidget.addTab(self, newTab, tabName)

	def addPane(self, tabName, pane) :
		# check if tab with this name exists
		if tabName in self.tabs :
			tab = self.tabs[tabName]
			tab.layout.insertWidget(tab.layout.count() - 1, pane)

if __name__ == "__main__" :
	app = Qt.QApplication(sys.argv)
	ribbon = QRibbon()

	# add a couple of tabs
	ribbon.addTab(ribbon.tr('Home'))
	ribbon.addTab(ribbon.tr('Insert'))
	
	ribbon.show()
	
	app.exec_()


Теперь открываем QtDesigner и рисуем панели, которые мы будем добавлять на «страницы» нашего риббона. Воспроизводить панель попиксельно в мои планы не входит, я просто покажу, как можно обыграть разные кнопки и раскрасить их с помощью таблицы стилей. Первую панель сделаем такой:

На ней будет большая кнопка Paste и 2 кнопки поменьше: Cut и Copy.

Вторая панель будет панелью шрифтов. Разместим на ней комбо-боксы для выбора семейства шрифта и его размера, а также «западающие» кнопки Bold, Italic и Underline:


Каждую из панелей мы сделаем отдельным виджетом (отдельным классом). Этот класс будет загружать свой ui-файл (который мы рисуем в дизайнере) и обрабатывать сигналы от контролов (эту часть я пропущу, как не относящуюся непосредственно к нашей теме).

Итак, добавим базовый класс панели (пока что он не несёт никакой нагрузки, но в дальнейшем через него можно будет задавать панелям некоторые общие свойства, как, например, стиль) и 2 класса панелей:

class Pane(Qt.QWidget) :
	def __init__(self) :
		Qt.QWidget.__init__(self)

class ClipboardPane(Pane) :
	def __init__(self) :
		Pane.__init__(self)
		uiClass, qtBaseClass = uic.loadUiType('edit.ui')
		self.ui = uiClass()
		self.ui.setupUi(self)

		# set icons for buttons
		self.ui.pasteBtn.setIcon(Qt.QIcon('paste.png'))
		self.ui.pasteBtn.setIconSize(Qt.QSize(48, 48))
		self.ui.cutBtn.setIcon(Qt.QIcon('cut.png'))
		self.ui.copyBtn.setIcon(Qt.QIcon('copy.png'))

class FontPane(Pane) :
	def __init__(self) :
		Pane.__init__(self)
		uiClass, qtBaseClass = uic.loadUiType('font.ui')
		self.ui = uiClass()
		self.ui.setupUi(self)


Ну и в главной функции добавим наши панели на страницу «Home»:

if __name__ == "__main__" :
	...
	# add two panes to "Home" page
	ribbon.addPane(ribbon.tr('Home'), ClipboardPane())
	ribbon.addPane(ribbon.tr('Home'), FontPane())
	...
	app.exec_()


В результате получаем вот такое чудо:


«Стоп!» — думаю себе, — «что-то тут не так»....


Очертания вроде проглядывают, но риббон явно «не торт»… Спокойствие, только спокойствие, подходим к самому интересному!
Итак, создадим вспомогательную функцию, читающую и возвращающую содержимое файла (будем использовать её для чтения таблиц стилей из файлов) и добавим в конструкторы классов QRibbon и Pane строчку, читающую соответствующий файл стиля:
def readStyleSheet(fileName) :
	css = Qt.QString()
	file = Qt.QFile(fileName)
	if file.open(Qt.QIODevice.ReadOnly) :
		css = Qt.QString(file.readAll())
		file.close()
	return css

class QRibbon(Qt.QTabWidget) :
	def __init__ (self) :
		...
		self.setStyleSheet(readStyleSheet('qribbon.qss'))

class FontPane(Pane) :
	def __init__(self) :
		...
		self.setStyleSheet(readStyleSheet('page.qss'))


Думаю, будет лучше, если кнопки Cut, Copy и Paste сделать плоскими. Идём в QtDesigner и выставляем им соответствующий атрибут. Ну а теперь займёмся самым интересным: создаём CSS, которая преобразит наш риббон до неузнаваемости!

«Раскрась сам»


Сначала займёмся таблицей стилей для основного окна (qribbon.qss). Синтаксис 1-в-1 скопирован с CSS, поэтому я буду давать лишь общие комментарии, ибо код говорит сам за себя:

Установим цвет фона виджетов:
QWidget {
	background-color: #d0d9f0;
}


Сделаем верхнюю границу панелей более симпатичной:
QTabWidget::pane {
	border-top: 2px solid qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #90a0e0, stop:1.0 #303070);
}

Тут требуется небольшое пояснение. При помощи первых 4-х параметров задаётся направление: из левого-верхнего угла в левый нижний, т.е. вертикально вниз. Далее идут контрольные точки (принимают значения от 0 до 1) и их цвета. В данном случае у нас простой градиент: идёт от нуля до единицы без дополнительных промежуточных точек.

Зададим небольшой отступ для табов:
QTabWidget::tab-bar {
	left: 30px;
}


Зададим отступы для каждого из табов в таб-баре, а также изменим цвет текста и сделаем табам круглые уголки:
QTabBar::tab {
	padding: 5px 15px 3px 15px;
	margin-top: 10px;
	color: #303070;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}


Изменим цвет таба при наведении курсора:
QTabBar::tab:hover {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
		stop: 0 #fffaff, stop: 0.4 #fff0c0,
		stop: 0.5 #fff0c0, stop: 1.0 #d0d9f0);
	border: 1px solid #a4a063;
}

Здесь градиент чуть сложнее: он имеет 2 промежуточные «контрольные точки»: 0.4 и 0.5.

Зададим неактивному табу стиль нижней границы, совпадающий с верхней границей панелей (см. выше):
QTabBar::tab:!selected {
	border-bottom: 2px solid qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #90a0e0, stop:1 #303070);
}


Изменим стиль активного таба и уберём его нижнюю границу:
QTabBar::tab:selected {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
		stop: 0 #f0f0ff, stop: 0.4 #f4f4ff,
		stop: 0.5 #e7e7ff, stop: 1.0 #d0d9f0);
	border: 1px solid #808090;
	border-bottom: solid 0px;
}


Слегка изменим стиль кнопок:
QPushButton {
	background-color: 
		qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6fcff, stop: 1.0 #a0b0d0);
	border: 1px solid #a0a0b0;
	border-radius: 3px;
}


Изменим цвет «утопленных» кнопок:
QPushButton:checked {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f0eeaa, stop: 1 #eeaa88);
}


Спрячем «плоские» кнопки. Пусть будет видно только содержимое:
QPushButton:flat {
	border: none;
	background: none;
}


«Оживим» кнопки в момент нажатия:
QPushButton:pressed {
	background-color: #e0e3ff;
}


Посмотрим что получилось:


Хм, вроде становится получше, правда же? Осталось придать немного шарма панелькам с контролами. Создадим файл page.qss:


QFrame {
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6fcff, stop: 1.0 #a0b0d0);
	border: 1px solid #8080a0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

QLabel {
	color: #303070;
	background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #c6cccf, stop: 1.0 #90a0b0);
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top: 0px;
}


Вот и всё.
Теперь вспомним то, как выглядел наш риббон до того, как мы применили стили и сравниваем с тем, как он выглядит теперь:



Неплохо, правда? :) (комбо-боксы, разумеется, тоже кастомизуются, но это я оставлю в качестве домашнего задания)

За подробной документацией по использованию стилей в Qt можно обращаться по адресу doc.trolltech.com/4.2/stylesheet.html
Единственное пожелаение тем, кто воспользуется данным вводным руководством и будет использовать стили в своих программах: помещайте стили во внешние файлы. В этом случае даже если вы слегка переусердствуете — пользователь сможет потюнить UI без необходимости разбирать программный код.

Архив с исходниками тут.