# QML 建立表格

table 在 qml 中收先需要引入以下library
∷ 這次介紹的是Controls 1.4 請務必引用進來

<br>

## <b>樣式Style</b>

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

如果需要引入自體的話，在TableView的層級引入即可

TableView{
    FontLoader{
        id: localFont;
        source: "qrc:/font/NotoSans-Regular.ttf"
    }
    style: TableViewStyle
    {
        headerDelegate: Rectangle{
            color: "black"
            Text{
                text: styleData.value
                color: "white"
            }
        }
       itemDelegate: Rectangle{
           color: "lightblue"
           Text{
               text: styleData.value
           }
       }
       rowDelegate: ...
       columnDelegate: ...
    }
    ...
}

* <b>style:</b> 樣式配置，如果需要抓立面的文字可以使用 <b>styleData.value</b>
* <b>headerDelegate:</b> 表格的每一欄的標頭，可以做外觀的設定
* <b>itemDelegate:</b> 內容的每一個的樣式
* <b>rowDelegate/columnDelegate:</b> 行列/直排的樣式

<br>

## <b>資料Data</b>
理解完樣式設定後，接下來做資料的設定

TableView{
    ...
    
    TableViewColumn {
        role: "name"
        title: "Name"
        movable: false
        resizable: false
        width: 300
    }
    TableViewColumn {
        role: "name2"
        title: "Name2"
        movable: false
        resizable: false
        width: 300
    }
    model: ListModel{
         ListElement{
             name: "Halloe"
             name2: "123"
         }   
    }    
}

* <b>TableViewColumn/TableViewRow: </b> 每一列/行的設定
* <b>role:</b> 設定欄位的名稱
* <b>title:</b> 設定該欄顯示的文字
* <b>movable:</b> 是否可拖動至其他列/行
* <b>resizable:</b> 寬度是否彈性，可供使用者拖拉
* <b>model:</b> 資料(這邊以靜態的作為範例，如需動態資料。開發者可至C++自行撰寫)
(這邊要注意，ListElement中的值必須對應TableViewColumn中的role)

<br>
完成示意:
<img src="https://i.imgur.com/Z4y1Vbu.png" style="width: 350px;">
<br><br>

資料:
https://doc.qt.io/qt-5/qml-qtquick-controls-tableview.html
https://doc.qt.io/qt-6/qml-qtquick-tableview.html
https://www.cnblogs.com/linuxAndMcu/p/13652479.html