QML UI Component Of Flat UI

Info Thread
By -Info Thread
December 24, 2022
1


 

 FLAT UI

Custom QML Component UI :

Main.qml 

//Main.qml file import QtQuick 2.3
import QtGraphicalEffects 1.0

Rectangle {
    id: root;
    width: 900;
    height: 700;


    Constants {
        id: constants;
    }


    Text {
        id: header;
        text: "Basic elements";
        color: constants.wetAsphalt;
        x: 24;
        y: 24;
        font {
            pointSize: 20;
            bold: true;
        }
    }


    Column {
        spacing: 24;
        anchors {
            top: header.bottom;
            left: parent.left;
            right: parent.right;
            bottom: parent.bottom;
            margins: 25;
        }

        Grid {
            spacing: 24;
            anchors {
                left: parent.left;
                right: parent.right;
            }

            PrimaryButton {
            }

            WarningButton {
            }

            DefaultButton {
            }
            DangerButton {
            }
        }


        Text {
            color: constants.wetAsphalt;
            text: "Input";
            font {
                pointSize: 15;
            }
        }


        Row {
            spacing: 24;


            Input {
                placeholderText: "Inactive";
            }


            Input {
                text: "Error";
                error: true;
            }


            Input {
                text: "Success";
                success: true;
            }


            Input {
                text: "Disabled";
                disabled: true;
            }
        }


        Row {
            spacing: 24;


            Text {
                color: constants.wetAsphalt;
                text: "Dropdown";
                font {
                    pointSize: 15;
                }
            }
        }


        Row {
            spacing: 24;


            Dropdown {
                width: 400;
            }


        }


        Text {
            color: constants.wetAsphalt;
            text: "Progress bars & Sliders";
            font {
                pointSize: 15;
            }
        }


        Column {
            FlatSlider {


            }
        }


        Text {
            color: constants.wetAsphalt;
            text: "Radio Buttons";
            font {
                pointSize: 15;
            }
        }


        Row {
            spacing: 48;


            Column {
                spacing: 12;


                FlatRadioButton {


                }
                FlatRadioButton {


                }
                FlatRadioButton {


                }
                FlatRadioButton {

                }
            }
        }
    }
}

 Controls Source Code :

PrimaryButton:

import QtQuick 2.3
import QtGraphicalEffects 1.0


Rectangle {
    id: root;
    width: 175;
    height: 40;
    radius: 4;


    property alias flatColors: constants;
    property alias mouseField: mouseArea;


    Constants {
        id: constants;
    }


    MouseArea {
        id: mouseArea;
        anchors.fill: parent;
        property bool clickedButton: false;


        onClicked: {
            if (clickedButton)
                clickedButton = false;
            else
                clickedButton = true;
        }


        onPressed: {
            primaryButton.color = root.pressColor;
        }


        onReleased: {
            primaryButton.setTimer = true;
        }


        hoverEnabled: true;
        onEntered: primaryButton.color = root.highlightColor;
        onExited: primaryButton.color = root.color;
    }


    property string color: constants.turquoise;
    property string pressColor: constants.greenSea;
    property string highlightColor: "#48c9b0";
    property string text: "Primary Button";
    property string textColor: "white";
    property int pointSize: 12;


    Rectangle {
        id: primaryButton;
        anchors.fill: parent;
        color: root.color;
        radius: root.radius;


        Text {
            id: buttonText;
            anchors.centerIn: parent;
            text: root.text;
            color: root.textColor;
            font {
                pointSize: root.pointSize;
            }
        }


        Behavior on color {
            PropertyAnimation {}
        }


        property bool setTimer: false;


        onSetTimerChanged: {
            if (setTimer)
                overlayTimer.restart();
            else
                overlayTimer.stop();
        }

        Timer {
            id: overlayTimer;
            interval: 50;
            onTriggered:  {
                primaryButton.color = root.color;
                primaryButton.setTimer = false;
                if (mouseArea.containsMouse)
                    primaryButton.color = root.highlightColor;
            }
        }
    }
}

WarningButton:

import QtQuick 2.3
PrimaryButton {
    pressColor: "#cda70d";
    color: flatColors.sunFlower;
    highlightColor: "#f4d313";
    text: "Warning Button";
}

DefaultButton:

import QtQuick 2.3
PrimaryButton {
    pressColor: "#a1a6a9";
    color: flatColors.silver;
    highlightColor: "#cacfd2";
    text: "Default Button";
    width: 175;
}

DangerButton:

import QtQuick 2.3

PrimaryButton {
    pressColor: "#c44133";
    color: flatColors.alizarin;
    highlightColor: "#ec7063";
    text: "Danger Button";
    width: 175;
}

Input:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2


TextField {
    id: textField
    height: 40;
    width: 175;


    Constants {
        id: constants;
    }


    // TODO
    // Change text color on Error and Success


    property string borderColor: focus ? constants.emerald : constants.silver;
    property string backgroundColor: disabled ? "#f7f9f9" : "white";
    property int pointSize: 11;
    property bool disabled: false;
    property bool error: false;
    property bool success: false;


    onDisabledChanged: {
        if (disabled) {
            textField.borderColor = "#e1e6e6";
            textField.textColor = "#e1e6e6";
        }


        else {
            textField.textColor = "black";
        }
    }


    onSuccessChanged: {
        if (success) {
            textField.textColor = constants.emerald;
            textField.borderColor = constants.emerald;
        }


        else {
            textField.textColor = "black";
            textField.borderColor = focus ? constants.emerald : constants.silver;
        }
    }


    onErrorChanged: {
        if (error) {
            textField.textColor = constants.alizarin;
            textField.borderColor = constants.alizarin;
        }


        else {
            textField.textColor = "black";
            textField.borderColor = focus ? constants.emerald : constants.silver;
        }


    }




    MouseArea {
        anchors.fill: parent;
        enabled: textField.disabled;
    }


    placeholderText: "Input";
    style: TextFieldStyle {
        padding.left: 12;
        font {
            pointSize: control.pointSize;
        }


        background: Rectangle {
            height: control.height;
            width: control.width;
            color: control.backgroundColor;
            border {
                width: 2;
                color: control.borderColor;
            }
            radius: 4;
        }
    }
}


DropDown :

import QtQuick 2.3
import QtQuick.Controls 1.2


PrimaryButton {
    id: dropDown;
    text: "Default";


    Image {
        anchors {
            right: parent.right;
            rightMargin: 12;
            verticalCenter: parent.verticalCenter;
        }


        source: "src/arrow-down-b.png";


        height: 20;
        width: 20;
        sourceSize {
            height: parent.height;
            width: parent.width;
        }
        fillMode: Image.PreserveAspectFit;
    }


    Constants {
        id: constants;
    }


    property string dropdownColor: "#f3f4f5";
    property string highlightColor: "#dee1e2";
    property string dropdownTextColor: "#606d7a";
    property int dropdownItemHeight: 40;
    property int dropdownWidth: width + 100;
    property int dropdownRadius: 4;
    property bool enableScrollView: false;
    property int scrollViewHeight: 0;
    property int scrollViewWidth: 0;


    property var model: ListModel {
        ListElement {item: "Apple";}
        ListElement {item: "Orange"; separator: true}
        ListElement {item: "Kiwi"; separator: true}
        ListElement {item: "Squash"; separator: true}
        ListElement {item: "Tree Bark"; separator: true}
        ListElement {item: "Llama"; separator: true}
    }


    Component.onCompleted: parent.z = 100;


    ScrollView {
        id: scrollView;
        anchors {
            top: visible ? dropDown.bottom : undefined;
            topMargin: 10;
        }
        height: dropDown.scrollViewHeight == 0 ? dropDown.dropdownItemHeight * listView.count : dropDown.scrollViewHeight;
        width: dropDown.scrollViewWidth == 0 ? dropDown.dropdownWidth : dropDown.scrollViewWidth;
        visible: dropDown.mouseField.clickedButton;
        contentItem: parent.enableScrollView ? dropdownBackground : null;
    }


    Rectangle {
        id: dropdownBackground;
        z: 100;
        radius: dropDown.dropdownRadius;
        visible: dropDown.mouseField.clickedButton;
        height: dropDown.dropdownItemHeight * listView.count;
        width: dropDown.dropdownWidth;
        color: dropDown.dropdownColor;


        anchors {
            top: scrollView.contentItem === null ? dropDown.bottom : undefined;
            topMargin: 10;
        }


        ListView {
            id: listView;
            anchors.fill: parent;
            highlightFollowsCurrentItem: true;
            property string highlightColor: dropDown.highlightColor;
            highlight: Rectangle {
                width: listView.currentItem.width;
                height: listView.currentItem.height;
                color: listView.highlightColor;
                radius: (listView.currentIndex !== listView.count-1 && listView.currentIndex !== 0) ? 0 : dropDown.dropdownRadius;
            }


            model: dropDown.model;
            property bool itemChecked: false;


            Component.onCompleted: dropDown.text = currentItem.currentText;




            delegate: Item {
                width: listView.width;
                height: dropDown.dropdownItemHeight;
                property string currentText: item;


                Rectangle {
                    id: separation;
                    color: dropDown.highlightColor;
                    height: 2;
                    visible: separator;
                    anchors {
                        top: parent.top;
                        left: parent.left;
                        right: parent.right;
                    }
                }


                Item {
                    anchors {
                        top: separation.bottom;
                        left: parent.left;
                        right: parent.right;
                        bottom: parent.bottom;
                    }


                    MouseArea {
                        anchors.fill: parent;
                        hoverEnabled: !listView.itemChecked;
                        onClicked: {
                            dropDown.text = item;
                            if (dropDown.enableScrollView) {
                                if (listView.itemChecked) {
                                    listView.itemChecked = false;
                                    listView.highlightColor = dropDown.highlightColor;
                                }
                                else {
                                    listView.itemChecked = true;
                                    listView.highlightColor = constants.secondary;
                                }
                            }
                            dropDown.mouseField.clickedButton = false;




                        }




                        onEntered: {
                            listView.currentIndex = index;
                        }
                    }
                    Text {
                        text: item;
                        color: dropDown.dropdownTextColor;
                        anchors {
                            left: parent.left;
                            leftMargin: 12;
                            verticalCenter: parent.verticalCenter;
                        }
                        font {
                            pointSize: 10;
                        }
                    }
                }
            }
        }
    }




}

FlatSlider:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2


Slider {
    id: slider;
    objectName: "Slider";
    Constants {
        id: constants;
    }


    width: 300;
    height: 12;
    minimumValue: 0;
    maximumValue: 100;
    value: 25;
    property int tickCount: 4;


    stepSize: tickCount !== 0 ? maximumValue / tickCount : 1;
    onStepSizeChanged: {
        var list = [];
        for (var i=0; i < tickCount+1; ++i)
            list.push(i);
        _tickModel = list;
    }


    property var _tickModel: [1,2,3,4,5];


    property bool _ticksEnabled: tickCount > 0;


    Component.onCompleted: {
        if (tickCount % 2 !== 0)
            console.error(slider.objectName + ".tickCount needs to have an even numbered tickCount");
    }


    style: SliderStyle {
        groove: Rectangle {
            z: 1;
            radius: 10;
            height: control.height;
            width: control.width;
            color: "#ebedef";
            Rectangle {
                id: highlightGroove;
                z: 3
                radius: parent.radius
                color: constants.secondary;
                anchors {
                    top: parent.top;
                    bottom: parent.bottom;
                    left: parent.left;
                }
                width: slider.width * (slider.value/100);
            }


            ListView {
                visible: slider._ticksEnabled;
                id: listView;
                z: 2;
                anchors.fill: parent;
                orientation: ListView.Horizontal;
                spacing: slider.width / listView.count;


                model: slider._tickModel;
                delegate: Item {
                    anchors {
                        top: parent.top;
                        bottom: parent.bottom;
                    }


                    width: 10;


                    Rectangle {
                        visible: (index !== 0 && index !== listView.count - 1);
                        anchors.centerIn: parent;
                        height: 6;
                        width: 6;
                        radius: width * 0.5;
                        color: "#d9dbdd";
                    }
                }
            }
        }


        handle: PrimaryButton {
            height: control.height * 1.8;
            width: height;
            radius: width * 0.5;
            color: constants.greenSea;
            text: "";
        }
    }
}

FlatRadioButton
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

RadioButton {
    id: radioButton;
    Constants {
        id: constants;
    }
    text: "Default";
    property string textColor: "black";
    property int spacing: 12;
    property bool disabled: false;


    style: RadioButtonStyle {
        spacing: control.spacing;


        indicator: Rectangle {
            height: 20;
            width: 20;
            radius: height * 0.5;
            color:  {
                if (disabled) {
                    return "#e6e8ea";
                }


                else {
                    return control.checked ? constants.silver : constants.secondary;
                }
            }


            Behavior on color {
                PropertyAnimation {duration: 100}
            }


            Rectangle {
                anchors.centerIn: parent;
                height: parent.height * 0.6;
                width: parent.height * 0.6;
                radius: height * 0.5;
                color: control.checked ? "white" : parent.color;
                border {
                    width: 3;
                    color: "white";
                }
                Behavior on color {
                    PropertyAnimation {duration: 100}
                }
            }
        }
    }
}

Tags:

You may like these posts

Show more

Post a Comment

1Comments

  1. AlbinaNovember 8, 2023 at 2:57 PM

    Your job is amazing! But I have a trouble with customizing textfield on qt6. TextFieldStyle is not working and Control.Style module is not found. Do you have any idea how to do that?

    ReplyDelete
Post a Comment
Share to other apps
Copy Post Link