【Qt學(xué)習(xí)筆記】12.樹、列表和表格 The Item Views

一、列表控件的使用方法（QListWidget）

QListWidget

負(fù)責(zé)以列表的形式顯示數(shù)據(jù)

其中的數(shù)據(jù)項(xiàng)稱為item，每個(gè)item至少包含

1、圖標(biāo)icon（可選）

2、文本text

3、關(guān)聯(lián)數(shù)據(jù)data（可選）

有點(diǎn)像Combox

界面：

添加項(xiàng)：

QListWidgetItem:代表一個(gè)數(shù)據(jù)項(xiàng)

QIcon icon1( "./MyIcon.png" );
ui.ListWidget->addItem( new QListWidgetItem( icon1, "book" ) );

在構(gòu)造函數(shù)里直接指定icon, text, 此對象由父窗口負(fù)責(zé)管理,我們在使用時(shí)也不需要考慮內(nèi)存的回收問題。

移除項(xiàng):

可以從列表中將一個(gè)數(shù)據(jù)項(xiàng)移除

//事先用currentRow()方法獲取所選擇的下標(biāo)
QListWidgetItem* takeItem( int row );

調(diào)用該方法，數(shù)據(jù)項(xiàng)將被移出列表，返回一個(gè)對象，該對象必須手動(dòng)釋放

（當(dāng)然，這個(gè)對象也可以繼續(xù)使用在別的用途）

該對象必須手工刪除！

該對象必須手工刪除！

該對象必須手工刪除！

該對象必須手工刪除

效果：

代碼：

class Test12_1a_12_13 : public QMainWindow
{
    Q_OBJECT

public:
    Test12_1a_12_13(QWidget *parent = Q_NULLPTR);

private:
    Ui::Test12_1a_12_13Class ui;

private slots:
	int OnBtnRemeve();
	int OnBtnSwitchView();
};


///////////////////////////

Test12_1a_12_13::Test12_1a_12_13(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);

	//添加數(shù)據(jù)項(xiàng)
	QIcon icon1("./Resources/Book.png");
	ui.listWidget->addItem(new QListWidgetItem(icon1, "book"));

	QIcon icon2("./Resources/Heart.png");
	ui.listWidget->addItem(new QListWidgetItem(icon2, "Heart"));

	QIcon icon3("./Resources/Location.png");
	ui.listWidget->addItem(new QListWidgetItem(icon3, " Location"));

	assert(connect( ui.btnRemove, SIGNAL(clicked(bool)), this, SLOT(OnBtnRemeve()) ));

	assert(connect(ui.btnSwitchView, SIGNAL(clicked(bool)), this, SLOT(OnBtnSwitchView())));

}

//刪除按鈕
int Test12_1a_12_13::OnBtnRemeve()
{
	//當(dāng)前的選中項(xiàng)（行號）
	int row = ui.listWidget->currentRow();
	QListWidgetItem* item = ui.listWidget->takeItem(row);
	//手動(dòng)釋放內(nèi)存
	if (item) 
	{
		delete item;
	}
	return 0;
}

//切換視圖按鈕（圖標(biāo)方式（平鋪）、列表）
//圖標(biāo)方式：QListView::IconMode
//列表方式：QListView::ListMode
int Test12_1a_12_13::OnBtnSwitchView()
{
	if (ui.listWidget->viewMode() == QListView::ListMode)
	{
		ui.listWidget->setViewMode(QListView::IconMode);
	}
	else
	{
		ui.listWidget->setViewMode(QListView::ListMode);
	}
	return 0;
}

信號：

常用的信號：單擊和雙擊事件

void itemClicked( QListWidgetItem* item );
void itemDoubleClicked( QListWidgetItem* item );

data:

每一項(xiàng)事件都可以關(guān)聯(lián)很多個(gè)data，每個(gè)data都有一個(gè)id（role）,每個(gè)role對應(yīng)一個(gè)值(value)

(有點(diǎn)類似STL里面的 key value )

Qt::UserRole(32)以上都是自定義的role，32以下用于顯示已經(jīng)規(guī)定好的role

（role 和 value 有點(diǎn)類似 K V的關(guān)系, 是一一對應(yīng)的）

二、Model/View構(gòu)架

Model/View構(gòu)架（簡單介紹）

在Qt里，將List,Tree,Table這三種控件統(tǒng)一按照Model/View構(gòu)架進(jìn)行設(shè)計(jì)。

它們的使用方法都是類似的。

Model: 

負(fù)責(zé)管理數(shù)據(jù)項(xiàng),統(tǒng)一安排二維表格數(shù)據(jù)進(jìn)行管理。

每一行稱為row

每一行內(nèi)有多個(gè)列column

每一項(xiàng)稱為item，每一項(xiàng)的坐標(biāo)稱為QModelIndex

(列表控件列數(shù)為1)

item:

數(shù)據(jù)項(xiàng)，每個(gè)單元格都是一個(gè)item，每個(gè)item可以關(guān)聯(lián)多個(gè)數(shù)據(jù)，每個(gè)數(shù)據(jù)用一個(gè)role來作為表示。

Qt::DisplayRole(0);    //一般對應(yīng)一個(gè)字符串，用于顯示
Qt::UserRole(32);      //自定義數(shù)據(jù)

View : 負(fù)責(zé)顯示;

三、自定義顯示

四、原位編輯

Test12_4a_12_15::Test12_4a_12_15(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
	Additem("book");
	Additem("heart");
	ui.listWidget->setItemDelegate(new MyDelegate(ui.listWidget));
}

void Test12_4a_12_15::Additem(QString name)
{
	QListWidgetItem* item = new QListWidgetItem();
	item->setData(Qt::DisplayRole, name);
	item->setFlags(Qt::ItemIsEnabled | Qt::ItemIsEditable);		//注意加上!
	ui.listWidget->addItem(item);
}



//第一步：創(chuàng)建一個(gè) widget 作為編輯器
QWidget* MyDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
	QLineEdit* editor = new QLineEdit(parent);
	return editor;
}

//第二步:調(diào)用編輯器的顯示位置
void MyDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
	editor->setGeometry(option.rect);
}

//第三步:初始化顯示數(shù)據(jù)
void MyDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
	QString text = index.data(Qt::DisplayRole).toString();
	QLineEdit* ed = (QLineEdit*)editor;
	ed->setText(text);
	//((QLineEdit*)editor)->setText(text);
}

//第四步:用戶完成編輯、或編輯器被關(guān)閉時(shí)，提供數(shù)據(jù)到model
void MyDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
	QLineEdit* lineEdit = (QLineEdit*)editor;
	QString value = lineEdit->text();
	model->setData(index, value, Qt::DisplayRole);
}

五、列表控件——右鍵菜單

任務(wù)：

給QListWidget添加右鍵支持，點(diǎn)擊右鍵的時(shí)候，彈出快捷菜單（又稱上下文菜單）

步驟：

1、設(shè)置菜單策略  setContextMenuPolicy( Qt::CustomContextMenu );

2、關(guān)聯(lián)信號 customContextMenuRequested()

3、事件處理(slot)：構(gòu)造菜單、顯示 

4、菜單響應(yīng)(action)

菜單的構(gòu)造：

QMenu menu;
//這些action事先在Qt Design 中的 Action Editor中添加
menu.addAction(ui.actionAdd);
menu.addAction(ui.actionRemove);

菜單的顯示：

//顯示菜單
menu.exec(ui.listWidget->mapToGlobal(pt));

要把這個(gè)QPoint轉(zhuǎn)換成全局坐標(biāo)（屏幕坐標(biāo)）

菜單的上下文：

在構(gòu)造快捷菜單時(shí)，應(yīng)該根據(jù)鼠標(biāo)點(diǎn)擊的位置（上下文）來定制不同的菜單

比如，當(dāng)鼠標(biāo)點(diǎn)中了一個(gè)現(xiàn)有項(xiàng)，則顯示“添加、刪除”菜單， 

而如果點(diǎn)中的是空白，則彈出菜單中，不應(yīng)該有“刪除”按鈕

六、樹控件 與 表格控件

樹控件(QTreeWidget)：

樹控件用于顯示“樹”形的數(shù)據(jù)，例如文件樹。

每一項(xiàng)可以用多個(gè)列(Column)，每一列表示該項(xiàng)的一個(gè)屬性

可以在Qt Designer中插入節(jié)點(diǎn)，也可以在代碼中手動(dòng)插入節(jié)點(diǎn)

表格(QTableWidget)

表格控件用于顯示“表格”狀的數(shù)據(jù)，成行、列顯示,

每個(gè)單元格是獨(dú)立的

補(bǔ)充：這里介紹的QTreeWidget 和 QTableWidget都是可以實(shí)現(xiàn)之前介紹的：

自定義顯示、原位編輯、右鍵菜單、事件處理的，

實(shí)現(xiàn)方式均為 Delegate