Search
Cílem programu je vykreslení šachovnice o velikosti 8×8 dlaždic. Dlaždice budou různých barev (tak jako na standardní šachovnici), po jednom kliknutí dlaždice ztmavne, po dalším změní barvu zpět na původní. Pro stylování dlaždic budeme používat styly definované ve externím stylesheetu.
Kompletní kód je ke stažení v git repozitáři nebo ve formě balíčku 01-chessboard.zip.
Řešení, které je zde představeno, využívá absolutního pozicování objektů v kontejneru. Tlačítka jsou vykreslena v konstruktoru.
// board.h class Board : public QWidget { Q_OBJECT QPushButton *b; public: Board (QWidget *parent = 0); };
// board.cpp Board::Board(QWidget *parent) : QWidget(parent) { for (int i = 0; i < 8; i++) { for (int j = 0; j < 8; j++) { b = new QPushButton(this); b->resize (50, 50); b->move (50*i, 50*j); } } }
Řešení má nevýhodu - při změně velikosti nejsou tlačítka škálována. K přeškálování lze využít faktu, že při změně velikosti widgetu se automaticky volá metoda resizeEvent. Tuto metodu lze v rámci vlastní třídy přepsat, např. takto:
void Board::resizeEvent (QResizeEvent *event) { // zjisteni nove velikosti okna, lze vyuzit i event->size() int width = this->geometry().width(); int height = this->geometry().height(); // zjisteni vetsiho rozmeru int size = (width > height) ? width : height; // maximalni velikost je dana vyskou displeje - viz konstruktor if (size > maxsize) size = maxsize; // zmena velikosti okna se zachovanim pomeru stran this->resize(size, size); // nova velikost dlazdice int tsize = size/8; // vyhledani vsech potomku kontejneru typu QPushButton QList<QPushButton *> buttons = this->findChildren<QPushButton *>(); // zmena velikosti a pozice vsech dlazdic for (int k = 0; k < buttons.size(); k++) { int i = buttons.at(k)->x() / buttons.at(k)->width(); int j = buttons.at(k)->y() / buttons.at(k)->height(); buttons.at(k)->move (i*tsize, j*tsize); buttons.at(k)->resize(size/8, size/8); } }
Maximalni velikost okna maxsize je privátním atributem třidy a je inicializována výškou displeje, sníženou o nějakou rozumnou hodnotu (taskbar ve Windows).
maxsize
#include <QApplication> #include <QDesktopWidget> ... maxsize = QApplication::desktop()->height() - 100;
K obarvení dlaždic je použit následující stylesheet
QAbstractButton { border-color: black; border-style: solid; border-width: 1px; } QAbstractButton[color=black] { background-color: #654321; } QAbstractButton[color=white] { background-color: #FFCC00; }
Jednolivým tlačítkům, reprezentujícím dlaždice šachovnice, je pak přiřazen atribut, který je použit k vybrání správného stylu
b = new QPushButton(this); b->setProperty("color", "white"); // pro nastaveni hodnoty atributu lze vyuzit vhodne pravidlo, napr. (i+j)%2
V této fázi by bylo možné více využít kombinace metod setProperty a property k aktualizaci a zjišťování stavu dlaždice (objektu). Z hlediska organizace kódu je ale lepší a přehlednější vytvořit vlastní třídu jako potomka třídy QPushButton, která bude mít vnitřní stav jako atribut třídy a na základě tohoto atributu poté aktualizovat grafickou podobu instance.
class Tile : public QPushButton { Q_OBJECT QString color; bool clicked; void updateStyle (); public: Tile (QString, QWidget *parent = 0); public slots: void changeState (); };
Parametrem konstruktoru je barva dlaždice. Třída má slot, který mění binární hodnotu atributu clicked. Při změně stavu objektu je pak změněna i grafická podoba. Hodnoty atributů ve stylesheetu jsou pak dány kombinací barvy vnitřního stavu.
clicked
Tile::Tile (QString c, QWidget *parent) : QPushButton(parent), color(c), clicked(false) { updateStyle(); } void Tile::changeState () { clicked = !clicked; updateStyle(); } void Tile::updateStyle () { setProperty("state", QVariant(QString("%1-%2").arg(color).arg(clicked))); // trik pro aktualizaci vlastnosti style()->unpolish(this); style()->polish(this); }
V konstruktoru třídy Board je pak třeba vytvářet instance derivované třídy Tile
Board
Tile
b = new Tile((i+j)%2 ? "black" : "white"); connect (b, SIGNAL(clicked()), b, SLOT(changeState()));
Poslední úpravou je vytvoření stylů pro tmavší dlaždice.
QAbstractButton[state="black-0"] { background-color: #654321; } QAbstractButton[state="black-1"] { background-color: #FF5500; } QAbstractButton[state="white-0"] { background-color: #FFCC00; } QAbstractButton[state="white-1"] { background-color: #FF0000; }