[QT教學] QT超簡單教學Day-3 ( Model , View ) @ 一個小小工程師的心情抒發天地

最近，很忙 ! 很忙 ! 很忙 !

因為真的TM的很忙，所以說三次，很忙 !

今天要介紹的是一個很重要的基礎，Model View architecture !

主要有3.............小部分組成，Model(模型), View(視圖), Delegate(委託)，

然後我們看圖說故事，在這張圖裡面，我們可以歸納出三件事情:

1. 只有Model可以直接訪問Data.

2. View和Delegate可以通過Model來取得數據.

3. View可以通過Model對數據Rendering，也可以通過Delegate進行Editing & Rendering.

Step1. 我們先在UI拉出這樣子 ( 白色的是ListView )

然後我們給每一個按鈕都Select signal ( clicked() )

Step2. 然後我們編輯一下dialog.h



#ifndef DIALOG_H
#define DIALOG_H
#include 
#include 
#include 


namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = nullptr);
    ~Dialog();

private slots:
    void on_pushButton_clicked();

    void on_pushButton_2_clicked();

    void on_pushButton_3_clicked();

private:
    Ui::Dialog *ui;
    QStringListModel *model; //<--- 新增這玩意

};

#endif // DIALOG_H

Step3. 然後我們到dialog.cpp去

在Construction那邊我們來新增一些東西 ( 每一行的意思，我就直接寫在註釋裡面就好 )



Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    // new obj
    model = new QStringListModel(this); 

    
    QStringList list;
    list <<"cats"<<"dogs"<<"birds";

    
    // 將我們的QStringList放到model裡面去
    model->setStringList(list);
    
    // 這時候我們model裡面放的是list，於是我們將這兩個control都set'同一個'Model
    ui->listView->setModel(model);
    ui->comboBox->setModel(model);

    ui->listView->setEditTriggers(QAbstractItemView::AnyKeyPressed |QAbstractItemView::DoubleClicked );
}

然後我們針對不同的按鈕實現不同的功能 :


 
void Dialog::on_pushButton_clicked()
{
    // Add
    int row = model->rowCount();
    model->insertRows(row,1);
    QModelIndex index = model->index(row);
    ui->listView->setCurrentIndex(index);
    ui->listView->edit(index);
}

void Dialog::on_pushButton_2_clicked()
{
    // Insert
    int row = ui->listView->currentIndex().row();
    model->insertRows(row,1);
    QModelIndex index = model->index(row);
    ui->listView->setCurrentIndex(index);
    ui->listView->edit(index);
}

void Dialog::on_pushButton_3_clicked()
{
    // Delete
    model->removeRows(ui->listView->currentIndex().row(),1);
}

結果 :

我們可以按下Add 來新增數據 ( 將一個我們想要的資料"123"加入至Data裡面 )

於是在combobox裡面也會同步更新。

你也可以連點兩下做編輯 :

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

其實Model & View這個概念還不錯，它實現了將數據和介面分開，使同樣的一份數據可以在介面上以不同表現形式顯示出來 ( 依此範例來說，我們的list 和 combox 都是使用同一份的StringList )，而不論我們怎麼操作，都是操作這一份數據，這讓我們程式工作者來說可以大幅減少出錯的可能性。

而透過這個框架，讓我學習到一點蠻重要的東西，以往，我可能需要什麼資料，我就問一次dll，dll可能就去做一次查找或更新什麼的，而在這個時間點，可能又改變了些什麼，讓我們的顯示其實有那麼一定的機率會出現資料不太一樣或不同步 ( 雖然說這個機率很小，不過還是有的 )。

所以，下一個專案，其實我會想要使用看看這種(Model , View )的方式，Data部分就由Dll那邊不斷的去更新它，而我在Model那一層我就不用一直在去問Dll了，我只需要去抓Data那一層的資料即可，而不管我有多少個APPs，我都是共用同一份Data，這樣我就能確保資料的正確率和更新率了。

That's all.