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

سوال

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

درحال طراحی یک رابط‌کابری‌ساده بوده‌ام که خواستم قسمت رنگ‌آمیزی 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) است و شما می‌تونید تغییر و توسعش بدین.

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


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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

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

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

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

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

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

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


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

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

×
×
  • جدید...