Calendar风格样式自定义——QML

前言

QML的日历只有Controls 1有，Controls 2里暂时还没有（说个题外话，2里的控件明显比1里简单好用多了），属性也就那么几个，比较简单，但是有些功能就有点欠缺。

我这次是日历有用到两个一个大的一个小的，为了复用，我就都写一块了，看着可能乱些。

效果图

上传的动图好像有点地方字体不清晰，这个可能是csdn问题吧，界面部分是没这个的。

代码和说明

通过自带的帮助可以看到Calendar的属性就那么几个（如下），就根据 自己的需求进行设置就行了。

• dayOfWeekFormat : int
• frameVisible : bool
• maximumDate : date
• minimumDate : date
• navigationBarVisible : bool
• selectedDate : date
• style : Component
• visibleMonth : int
• visibleYear : int
• weekNumbersVisible : bool 

 

然后说风格设置当然用到了属性style。它有一个专门的类CalendarStyle 来设置风格样式。CalendarStyle的用法也很简单，同样属性很少，一一对应着写就没问题了。

• background : Component
• control : Calendar
• dayDelegate : Component
• dayOfWeekDelegate : Component
• gridColor : color
• gridVisible : bool
• navigationBar : Component
• weekNumberDelegate : Component 

这其中我想说的几点是：

1.如果对语言的设置，则对Locale进行设置，即Calendar.__locale进行设置，其他的类似的也可在里面找

2.Locale里有个星期的第一天的设置firstDayOfWeek，但是我设置了没效果，有哪个大佬知道问题所在，告诉我一声。

3.我的代码中有两处“去事件穿透”，这是因为我的小日历点击没有响应鼠标时间的地方，它就传到下面的ComboBox了，所以就在此accpet鼠标按下操作。

 

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1

Calendar{
    id:calendar;

    property  bool isLargerValue; //来区分我的日历是大的还是小的 

    frameVisible: !calendar.isLargerValue; //边框
    weekNumbersVisible: false;             //周数 即竖表头
    dayOfWeekFormat:isLargerValue ? Locale.LongFormat : Locale.ShortFormat; //星期几或周几
    selectedDate: new Date();  //初始化选中当天
    focus: true;

//=============风格样式设置====================
    style: CalendarStyle {
        gridVisible: false;
//============导航栏风格设置===========================
        navigationBar:Item {
            height: calendar.height/8;
            Rectangle{
                anchors.fill: parent;
                color: calendar.isLargerValue? "#F7F7F7" : "#FFFFFF";

                //去事件穿透
                MouseArea{
                    anchors.fill: parent;
                    onPressed:{
                         mouse.accepted = true
                    }
                }

                Text{
                    id:dateText;
                    anchors.centerIn: parent;
                    color: "#333333";
                    font{family: "Microsoft YaHei"; pixelSize: calendar.isLargerValue?14:12;}
                    text:{
                        var str=control.visibleYear+"年"+fillZero(control.visibleMonth+1)+"月";
                        return str;
                    }
                }
                Rectangle{
                    id:previousMonth;
                    anchors.right: dateText.left;
                    anchors.rightMargin: calendar.isLargerValue ? 30 : 20;
                    anchors.verticalCenter: dateText.verticalCenter;
                    width: calendar.isLargerValue ? 9:7;
                    height: calendar.isLargerValue?16:11;
                    color: "transparent";
                    Image{
                        anchors.fill: parent;
                        source: "qrc:/Img/res/work/leftButton.png"
                    }
                    MouseArea{
                        anchors.fill: parent;
                        onClicked: {
                            control.showPreviousMonth();
                            //dateText.text=control.visibleYear+"年"+(control.visibleMonth+1)+"月";
                        }
                    }
                }
                Rectangle{
                    id:nextMonth;
                    anchors.left: dateText.right;
                    anchors.leftMargin: calendar.isLargerValue ? 30 : 20;
                    anchors.verticalCenter: dateText.verticalCenter;
                    width: calendar.isLargerValue ? 9:7;
                    height: calendar.isLargerValue?16:11;
                    color: "transparent";
                    Image{
                        anchors.fill: parent;
                        source: "qrc:/Img/res/work/rightButton.png"
                    }
                    MouseArea{
                        anchors.fill: parent;
                        onClicked: {
                            control.showNextMonth();
                        }
                    }
                }

            }
            //长度不足2 补零
            function fillZero(value) {
                return value.toString().length < 2 ? ('0' + value) : value
            }

        }
//============星期标识头风格设置=======================
        dayOfWeekDelegate:Item {
            id:weekDelegate;
            height: calendar.height/8;
            Rectangle{
                anchors.fill: parent;
                color: calendar.isLargerValue?"#F7F7F7":"#FFFFFF";
                anchors.margins: -1;
                //去事件穿透
                MouseArea{
                    anchors.fill: parent;
                    onPressed:{
                         mouse.accepted = true
                    }
                }
                Text{
                    id:weekDay
                    anchors.centerIn: parent;
                    color: "#666666"
                    font{ family: "Microsoft YaHei"; pixelSize: calendar.isLargerValue?12:10;}
                    text: control.__locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat);
                }
            }
        }
//===============天（day）风格设置=============================
        dayDelegate: Item {
            id:dayDelegate;
            readonly property color sameMonthDateTextColor: "#333333"
            readonly property color selectedDateColor: "#409CE1"
            readonly property color selectedDateTextColor: "white"
            readonly property color differentMonthDateTextColor: "#D4D4D4"
            readonly property color invalidDatecolor: "#dddddd"
            height: 20;
            Rectangle {
                anchors.fill: parent
                color:calendar.isLargerValue?"#F7F7F7":"#FFFFFF";
                anchors.margins: styleData.selected ? -1 : 0
                Canvas{
                    anchors.fill:parent;
                    visible: styleData.selected;
                    onPaint: {
                        var ctx=getContext("2d");
                        ctx.strokeStyle="#409CE1";
                        ctx.fillStyle="#409CE1";
                        ctx.beginPath();
                        var diameter=calendar.isLargerValue ?20:16;
                        ctx.ellipse(parent.width/2-diameter/2,parent.height/2-diameter/2,diameter,diameter);
                        ctx.closePath();
                        ctx.fill();
                        ctx.stroke();

                    }

                }
            }

            Label {
                id: dayDelegateText
                text: styleData.date.getDate()
                anchors.centerIn: parent
                font{ family: "Microsoft YaHei"; pixelSize: calendar.isLargerValue?12:10;}
                color: {
                    var color = invalidDatecolor;
                    if (styleData.valid) {
                        // Date is within the valid range.
                        color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                        if (styleData.selected) {
                            color = selectedDateTextColor;
                        }
                    }
                    color;
                }
            }
        }
    }
//    Component.onCompleted: {
//        calendar.__locale.firstDayOfWeek =Locale.
//    }
}

结束语

最近一直在搞日历，感觉好麻烦，稍微有点地方没设好，就不是自己想要的效果。还有确实该学学javaScript了，写个方法，还不停翻教程，也是服了。