QML TableView修改单个Item的颜色

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chyuanrufeng/article/details/81987506

QML 的表格TableView可以实现漂亮的表格效果，当然修改当个item或者整行的字体颜色或者背景功能也是必须的。

此例子实现单个item的字体颜色修改，背景色也是如此。效果如下：

具体代码如下：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ListModel {
          id: libraryModel
          ListElement {
              title: "A Masterpiece"
              author: "-Gabriel"
          }
          ListElement {
              title: "Brilliance"
              author: "-Jens"
          }
          ListElement {
              title: "Outstanding"
              author: "-Frederik"
          }
      }

    TableView {
        width: 500;
        height: 400;

         TableViewColumn {
             role: "title"
             title: "Title"
             width: 100
         }
         TableViewColumn {
             role: "author"
             title: "Author"
             width: 200
         }
         model: libraryModel

        rowDelegate : Rectangle{
            height: 40;
        }

         itemDelegate: Rectangle{
             //color: "#052641"
             border.width: 1
             height: 30;
             color : styleData.selected ? "#dd00498C": "#052641"
             Text {
                  //anchors.centerIn : parent
                  anchors.verticalCenter: parent.verticalCenter
                  x : 10;
                  anchors.leftMargin: 5
                  color : changeColor(styleData.value) ? "red": "white" //重点
                  text: styleData.value

                  font.pixelSize: parent.height*0.5
                  function changeColor( value )
                     {
                        var sss = value.indexOf("-");
                        if (value.indexOf("-")>-1)
                         return true;
                        else
                            return false;
                     }
              }
         }
     }

}

可以在属性后面带一个函数，此函数返回属性的值即可

上面的例子可以这样。color的属性是取决来changeColor的返回值。

当然你也可以直接写一个返回的color的值

color: getBackColor(styleData.row);

function getBackColor(row)

            {

                if(row%5 == 1) return "#ddff00";

                if(row%5 == 2) return "#fdff00";

                if(row%5 == 3) return "#ffff00";

                if(row%5 == 4) return "#ff00ff";

            }

扫描二维码关注公众号，回复： 3979658 查看本文章