QML TableView编辑使用

原文地址::https://blog.csdn.net/chyuanrufeng/article/details/79902128

相关文章

1、QML TableView使用----http://www.cppblog.com/gaimor/archive/2019/09/06/216784.html

2、qml TableView样式设置----https://blog.csdn.net/jueying6449/article/details/86147330?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control

3、QmlTableView----https://blog.csdn.net/zhengtianzuo06/article/details/78287450?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242

4、qml 表格TableView 创建----https://blog.csdn.net/sy_18244244951/article/details/105455969?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control

 

在开发中，表格使用还是很频繁的。qt例子中的比较丑，行高不能修改。本例QML实现动态表头、添加数据，自定义样式，修改行高，在c++中动态添加数据等。

具体效果如下：

核心代码TableViewItem.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
 
Item {
    //anchors.centerIn: parent
    width: 500; height: 400
 
    //[add header]
    function addColunm(rolorstr, titlestr)
        {
 
            var prefix = 'import QtQuick 2.7;import QtQuick.Controls 1.4;TableViewColumn {width: tableView.viewport.width/tableView.columnCount;';
            //创建TableViewColumn的代码
            //循环添加TableViewColumn
            var str = prefix  +"role:\"" + rolorstr + "\";title:\"" + titlestr + "\"}";
            tableView.addColumn(Qt.createQmlObject(str,tableView,"qrc:/TableViewItem.qml"));
        }
    //[!add header]
 
    //[addrowdata]
    function addRowData(d)
    {
         tablemode.append(d);
    }
    //[!addrowdata]
 
    /
    ListModel {
        id: tablemode
 
        ListElement {
            title: "A"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }
 
    TableView{
        id :tableView
        anchors.fill: parent
        alternatingRowColors : false
        TableViewColumn {
                  role: "title"
                  title: "Title"
                  width: tableView.viewport.width/tableView.columnCount
              }
          TableViewColumn {
              role: "author"
              title: "Author"
              width: tableView.viewport.width/tableView.columnCount
          }
          model: tablemode
 
          //自定义表头代理
           headerDelegate:
           Rectangle{
               //color: "#00498C"
               gradient: Gradient {
                   GradientStop { position: 0.0; color: "#085FB2" }
                   GradientStop { position: 1.0; color: "#00498C" }
               }
               //color : styleData.selected ? "blue": "darkgray"
               width: 100;
               height: 40
               border.color: "black"
               //border.width: 1
               //radius: 5
               Text
                {
                    anchors.centerIn : parent
                    text: styleData.value
                    font.pixelSize: parent.height*0.5
                }
           }
 
       //行代理可以修改行高等信息
       rowDelegate: Rectangle {
           height: 50
           color: "#052641"
           anchors.leftMargin: 2
 
       }
       itemDelegate: Rectangle{
           //color: "#052641"
           border.width: 1
           color : styleData.selected ? "#dd00498C": "#052641"
           Text {
                anchors.verticalCenter: parent.verticalCenter
                //anchors.fill: parent
                anchors.leftMargin: 5
                color : styleData.selected ? "#00CCFE": "white"
                text: styleData.value
                font.pixelSize: parent.height*0.4
            }
       }
 
         style: TableViewStyle{
             textColor: "white"
             highlightedTextColor : "#00CCFE"  //选中的颜色
             backgroundColor : "#052641"
         }
    }
}
使用方式
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    objectName: "root"
    color: "#0C1F31"
    Rectangle{
        width: 30; height: 30
        color: "blue";
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log(Date().toLocaleString(Qt.locale("de_DE")))
                for (var i = 0; i < 10; ++i)
                    item.addRowData({title:"addd"+i ,author:"ts"});
                //item.addColunm("s"+i,"d")
                console.log(Date().toLocaleString(Qt.locale("de_DE")))
            }
            onWheel: {
                if (wheel.angleDelta.y > 0)
                     item.scale = item.scale*1.2;
                 else
                     item.scale = item.scale*0.8;
             }
        }
    }
    TableViewItem{
        id : item
        anchors.centerIn: parent
        objectName: "tableview"
        x : 30; y : 100
        //anchors.centerIn:  parent
    }
}

在c++中动态添加数据

 QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
   QQuickItem*  item = engine.rootObjects().at(0)->findChild<QQuickItem*>("tableview");
   qDebug() << item->objectName();
   QVariantMap m;
   m.insert("title","ssssxx");
   m.insert("author","ceshi");
   QMetaObject::invokeMethod(item,  "addRowData",  Q_ARG(QVariant, m)); //调用函数
————————————————
版权声明：本文为CSDN博主「缘如风」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chyuanrufeng/article/details/79902128