首次使用Qt/QML，寻求集成祈祷时间API的技术协助

1. 配置项目网络依赖 #

首先确保项目启用Qt网络模块，在你的.pro文件中添加：

QT += network

这是使用Qt网络API的前提。

2. 编写C++后端处理API请求 #

Qt推荐用C++处理网络、数据解析等逻辑，QML负责UI展示。创建一个PrayerTimeManager类，封装API请求与解析：

#include <QObject>
#include <QNetworkAccessManager>
#include <QNetworkRequest>
#include <QNetworkReply>
#include <QJsonDocument>
#include <QJsonObject>

class PrayerTimeManager : public QObject
{
    Q_OBJECT
public:
    explicit PrayerTimeManager(QObject *parent = nullptr) 
        : QObject(parent), m_networkManager(new QNetworkAccessManager(this)) {}

    // 暴露给QML调用的方法，参数为国家和城市
    Q_INVOKABLE void fetchPrayerTimes(const QString& country, const QString& city) {
        // 替换为你实际使用的祈祷时间API地址，按API文档构造参数
        QString apiUrl = QString("https://api.example.com/prayer?country=%1&city=%2")
                            .arg(country).arg(city);
        QNetworkRequest request(QUrl(apiUrl));
        
        QNetworkReply *reply = m_networkManager->get(request);
        connect(reply, &QNetworkReply::finished, this, [=]() {
            if (reply->error() == QNetworkReply::NoError) {
                QByteArray rawData = reply->readAll();
                QJsonDocument jsonDoc = QJsonDocument::fromJson(rawData);
                QJsonObject dataObj = jsonDoc.object();

                // 从JSON中提取祈祷时间字段，根据API返回结构调整
                QString fajr = dataObj["fajr"].toString();
                QString dhuhr = dataObj["dhuhr"].toString();
                QString asr = dataObj["asr"].toString();
                QString maghrib = dataObj["maghrib"].toString();
                QString isha = dataObj["isha"].toString();

                // 发送信号通知QML更新UI
                emit prayerTimesLoaded(fajr, dhuhr, asr, maghrib, isha);
            } else {
                emit requestFailed(reply->errorString());
            }
            reply->deleteLater();
        });
    }

signals:
    // 成功获取数据的信号
    void prayerTimesLoaded(const QString& fajr, const QString& dhuhr, 
                           const QString& asr, const QString& maghrib, const QString& isha);
    // 请求失败的信号
    void requestFailed(const QString& errorMsg);

private:
    QNetworkAccessManager *m_networkManager;
};

接着在main.cpp中把这个类注册到QML上下文，让QML可以访问：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "PrayerTimeManager.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    // 注册C++类到QML命名空间
    qmlRegisterType<PrayerTimeManager>("com.yourdomain.prayertimes", 1, 0, "PrayerTimeManager");

    const QUrl url(u"qrc:/Main.qml"_qs);
    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();
}

3. QML端调用并展示数据 #

在QML中实例化后端类，添加UI控件输入参数、触发请求，并展示结果：

import QtQuick 2.15
import QtQuick.Controls 2.15
import com.yourdomain.prayertimes 1.0

ApplicationWindow {
    width: 400
    height: 500
    visible: true
    title: "Prayer Times"

    PrayerTimeManager {
        id: prayerManager
        onPrayerTimesLoaded: {
            fajrLabel.text = "Fajr: " + fajr
            dhuhrLabel.text = "Dhuhr: " + dhuhr
            asrLabel.text = "Asr: " + asr
            maghribLabel.text = "Maghrib: " + maghrib
            ishaLabel.text = "Isha: " + isha
            errorLabel.text = ""
        }
        onRequestFailed: {
            errorLabel.text = "Error: " + errorMsg
        }
    }

    Column {
        anchors.centerIn: parent
        spacing: 15

        TextField {
            id: countryInput
            placeholderText: "Enter Country"
            width: 250
        }

        TextField {
            id: cityInput
            placeholderText: "Enter City"
            width: 250
        }

        Button {
            text: "Get Prayer Times"
            onClicked: prayerManager.fetchPrayerTimes(countryInput.text, cityInput.text)
        }

        Text { id: fajrLabel }
        Text { id: dhuhrLabel }
        Text { id: asrLabel }
        Text { id: maghribLabel }
        Text { id: ishaLabel }

        Text {
            id: errorLabel
            color: "red"
            wrapMode: Text.WordWrap
            width: 250
        }
    }
}

关键注意事项 #

• API适配：替换示例中的API地址为你实际使用的祈祷时间API，根据API文档调整请求参数（比如部分API需要经纬度、日期或教派参数）和JSON解析逻辑。
• 平台权限：如果是移动平台，需添加网络访问权限（如Android的android.permission.INTERNET）。
• 异步处理：Qt的QNetworkAccessManager默认异步执行请求，无需额外线程，避免阻塞UI。
• 错误处理：示例中包含了基本的错误捕获，你可以根据需求扩展（比如超时处理、无网络判断）。

内容的提问来源于stack exchange，提问作者Jung San