رفتن به مطلب
جامعهٔ برنامه‌نویسان مُدرن ایران

سوال

درود و خسته‌نباشید به دوستان؛

درحال طراحی یک رابط‌کابری‌ساده بوده‌ام که خواستم قسمت رنگ‌آمیزی Itemها و Fontها و ... به راحتی قابل تغییر و برنامه‌ریزی باشد. اینکار را با استفاده از یک فایل QML جدا به اسم Style.qml به شکل زیر انجام دادم :

pragma Singleton
import QtQuick 2.13

Item {
    property int   textinputTextSize : 22

    property color transparent    : "transparent"
    property color bluredColor    : "#5AAFAAAA"

    property int   tabBarWidth    : 50
    property int   tabBarHeight   : 75
    property int   tabBarIconSize : 44
    property int   tabBarTextSize : 20
    property color tabBarIconColor: "#81D8DE"
    property color tabBarTextColor: "#059EAB"
    property color tabBarBackColor: "#0571AB"

    property alias sahelRegular : sahel_font.name
    property alias fontAwesome  : font_awesome.name

    FontLoader{
        id: sahel_font
        source: "qrc:/assets/fonts/sahel/Sahel-FD-WOL.ttf"
    }
    FontLoader{
        id: font_awesome
        source: "qrc:/assets/fonts/awesome/fontawesome-regular.ttf"
    }

    property color mainpageColor        : "#E3F2FD"
    property color mainpageToolbarColor : bluredColor
}

آیا این روش بهینه و درست است ؟ و یا راه بهتری هم وجود دارد ؟

ویرایش شده در توسط قاسم رمضانی منش
تصحیح‌نگارشی.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

1 پاسخ به این سوال تا کنون داده شده است

پست های پیشنهاد شده

  • 1
در 19 دقیقه قبل، قاسم رمضانی منش گفته است :

درود و خسته‌نباشید به دوستان؛

درحال طراحی یک رابط‌کابری‌ساده بوده‌ام که خواستم قسمت رنگ‌آمیزی Itemها و Fontها و ... به راحتی قابل تغییر و برنامه‌ریزی باشد. اینکار را با استفاده از یک فایل QML جدا به اسم Style.qml به شکل زیر انجام دادم :


pragma Singleton
import QtQuick 2.13

Item {
    property int   textinputTextSize : 22

    property color transparent    : "transparent"
    property color bluredColor    : "#5AAFAAAA"

    property int   tabBarWidth    : 50
    property int   tabBarHeight   : 75
    property int   tabBarIconSize : 44
    property int   tabBarTextSize : 20
    property color tabBarIconColor: "#81D8DE"
    property color tabBarTextColor: "#059EAB"
    property color tabBarBackColor: "#0571AB"

    property alias sahelRegular : sahel_font.name
    property alias fontAwesome  : font_awesome.name

    FontLoader{
        id: sahel_font
        source: "qrc:/assets/fonts/sahel/Sahel-FD-WOL.ttf"
    }
    FontLoader{
        id: font_awesome
        source: "qrc:/assets/fonts/awesome/fontawesome-regular.ttf"
    }

    property color mainpageColor        : "#E3F2FD"
    property color mainpageToolbarColor : bluredColor
}

آیا این روش بهینه و درست است ؟ و یا راه بهتری هم وجود دارد ؟

با سلام و درود،

روشی که به کار گرفته‌اید صحیح است اما حرفه‌ای و پویا نیست.

پیشنهاد من ایجاد یک کلاس در سمت بک‌اِند تحت C++ مشتق شده از QObject است.

برای مثال کلاس زیر را در نظر بگیرید.

#pragma once
#ifndef STYLE_HPP
#define STYLE_HPP

#include <QObject>
#include <QColor>

class Style : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QColor primary      READ primary    WRITE setPrimary    NOTIFY primaryChanged)
    Q_PROPERTY(QColor secondary    READ secondary  WRITE setSecondary  NOTIFY secondaryChanged)
    Q_PROPERTY(int    h1           READ h1         WRITE setH1         NOTIFY h1Changed)

public:
    Style();
    ~Style();

    QColor primary      () const;
    QColor secondary    () const;
    int h1              () const;

public slots:
    void setPrimary     (const QColor &color);
    void setSecondary   (const QColor &color);
    void setH1          (const int &size);

signals:
    void primaryChanged ();
    void secondaryChanged();
    void h1Changed();

private:
    QColor m_primary;
    QColor m_secondary;
    int    m_h1;

};

#endif // STYLE_H
#include "style.hpp"

Style::Style()
{
    this->m_primary = "gray";
    this->m_secondary = "black";
    this->m_h1 = 12;
}

Style::~Style()
{

}

void Style::setPrimary(const QColor &color) {
    if (color != m_primary)  {
        m_primary = color;
        emit primaryChanged();
    }
}

QColor Style::primary() const {
    return m_primary;
}

void Style::setSecondary(const QColor &color) {
    if (color != m_secondary)  {
        m_secondary = color;
        emit secondaryChanged();
    }
}

QColor Style::secondary() const {
    return m_secondary;
}

void Style::setH1(const int &size) {
    if (size != m_h1)  {
        m_h1 = size;
        emit h1Changed();
    }
}

int Style::h1() const {
    return m_h1;
}

تابع Main

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlEngine>
#include <QQmlContext>
#include "style.hpp"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    QQmlContext *context = engine.rootContext();

    Style style;

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    context->setContextProperty("Style", &style);

    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

و در بخش QML به این صورت:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent
        color: Style.primary

        ColumnLayout {
            anchors.centerIn: parent

            Text {
                text: qsTr("Hello, World!")
                color: Style.secondary
                font.pixelSize: Style.h1
            }

            Slider {
                from: 12
                to: 64
                snapMode: Slider.SnapAlways
                stepSize: 0.5
                onValueChanged: {
                    Style.setH1(value)
                }
            }

            Switch {
                onCheckedChanged: {
                    if(checked) {
                        Style.setPrimary("green")
                        Style.setSecondary("orange")
                    } else {
                        Style.setPrimary("gray")
                        Style.setSecondary("black")
                    }
                }
            }
        }
    }
}

مثالی که زدم صرفاً یک روش مفهومی (Concept) است و شما می‌تونید تغییر و توسعش بدین.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو ملحق شوید

شما همین الآن می‌توانید مطلبی را ارسال و بعداً ثبت‌نام کنید. اگر حساب کاربری دارید، و با حساب کاربری خود مطلب ارسال کنید.
نکته: مطلب شما قبل از انتشار نیاز به بازبینی توسط میانجی‌گر‌ها دارد.

مهمان
پاسخ به این سوال ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • جدید...