如何在QML中设置礼拜API？Qt/QML新手项目集成求助

先确认API返回结构 #

先手动访问 https://adhanmaroc.onrender.com/api/city/[你的城市名]（比如替换成Casablanca），确认返回的JSON格式。典型返回如下：

{
  "date": "Tuesday, 26 Sep 2023",
  "prayers": {
    "Fajr": "05:32",
    "Sunrise": "07:02",
    "Dhuhr": "12:38",
    "Asr": "15:54",
    "Maghrib": "18:14",
    "Isha": "19:36"
  }
}

你的问题大概率是网络请求未正确处理、数据解析错误或ListView未绑定有效Model，以下是完整解决方案：

常见问题排查与修复 #

1. 网络请求未异步处理 #

QML网络请求是异步的，必须在回调中处理返回数据，不能同步读取结果。

2. Model未正确绑定 #

ListView需要ListModel作为数据源，需将API返回的礼拜时间逐个添加到Model中。

3. 移动端权限缺失 #

如果是Android平台，需在AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

完整可运行示例代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 400
    height: 600
    visible: true
    title: "礼拜时间查询"

    property string selectedCity: "Casablanca"
    ListModel { id: prayerModel }

    Column {
        anchors.fill: parent
        spacing: 10
        padding: 10

        ComboBox {
            id: cityCombo
            width: parent.width
            model: ["Casablanca", "Rabat", "Marrakech", "Tangier"]
            currentText: selectedCity
            onCurrentTextChanged: {
                selectedCity = currentText
                fetchPrayerTimes()
            }
        }

        Text {
            id: dateText
            width: parent.width
            font.pointSize: 14
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
        }

        ListView {
            anchors.fill: parent
            anchors.topMargin: 10
            model: prayerModel
            delegate: Item {
                width: parent.width
                height: 40
                Row {
                    anchors.centerIn: parent
                    spacing: 20
                    Text {
                        text: model.prayerName
                        font.pointSize: 12
                        width: 100
                        horizontalAlignment: Text.AlignRight
                    }
                    Text {
                        text: model.prayerTime
                        font.pointSize: 12
                        font.bold: true
                    }
                }
            }
        }
    }

    function fetchPrayerTimes() {
        prayerModel.clear()
        dateText.text = ""

        const xhr = new XMLHttpRequest()
        xhr.open("GET", `https://adhanmaroc.onrender.com/api/city/${selectedCity}`)
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText)
                    dateText.text = response.date
                    // 遍历礼拜时间并添加到Model
                    for (const [name, time] of Object.entries(response.prayers)) {
                        prayerModel.append({ prayerName: name, prayerTime: time })
                    }
                } else {
                    console.error(`请求失败：状态码 ${xhr.status}`)
                }
            }
        }
        xhr.send()
    }

    Component.onCompleted: fetchPrayerTimes()
}

关键注意事项 #

• 每次切换城市时清空ListModel，避免旧数据残留
• 用console.error打印请求错误，方便排查API访问问题
• 若API返回的JSON结构和示例不同，需调整response.prayers的解析逻辑

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