qml011-ListView002-仿12306App的火车票界面
qml011-ListView002-仿12306App的火车票界面
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
width: 498
height: 1080
visible: true
title: qsTr("仿12306界面")
Rectangle {
id: mainRect
anchors.fill: parent
color: "whitesmoke"
ListView {
id: view01
anchors.fill: parent
spacing: 6 // 这是项与项之间的间距
topMargin: 1 // 顶部边距
bottomMargin: 1 // 底部边距
delegate: Rectangle {
color: "white"
width: view01.width - 12 // 左右各2像素边距，所以宽度减少4像素
height: view01.height/6.5
radius: 5
x: 6 // 左右边距2像素
// 显示车票信息的文本
Column {
anchors.fill: parent
anchors.margins: 10
Row {
width: parent.width
height: parent.height*0.7
anchors {
leftMargin: 8
rightMargin: 8
topMargin: 2
bottomMargin: 2
}
Rectangle {
width: parent.width * 0.2333
height: parent.height
// color: "red"
Text {
id: text01
text: extractTime(beginTime)
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 22
}
Row {
anchors.top:text01.bottom
anchors.topMargin: 2
anchors.horizontalCenter: text01.horizontalCenter
Rectangle {
color: "#209ef6"
width: 16
height: 16
radius: 2
y: 4
Text {
id: text02
anchors.centerIn: parent
text: "过"
font.pixelSize: 10
color: "white"
}
}
Text {
id: text03
anchors.left: text02.right
anchors.verticalCenter: text02.verticalCenter
anchors.horizontalCenter: text02.horizontalCenter
text: fromCity
font.pixelSize: 22
}
}
}
Rectangle {
width: parent.width * 0.2333
height: parent.height
// color: "green"
Rectangle {
id: splitline01
anchors.centerIn: parent
width: parent.width - 16
height: 2
color: "gray"
}
Text {
anchors.bottom: splitline01.top
anchors.bottomMargin: 2 // 在横线上方2像素
anchors.horizontalCenter: splitline01.horizontalCenter
text: tranId
font.pixelSize: 16
}
Text {
anchors.top: splitline01.bottom
anchors.topMargin: 2 // 在横线上方2像素
anchors.horizontalCenter: splitline01.horizontalCenter
text: calculateDuration(beginTime, endTime)// 计算时长
font.pixelSize: 12
color : "gray"
}
}
Rectangle {
width: parent.width * 0.2333
height: parent.height
// color: "blue"
Text {
id: text05
text: extractTime(endTime)
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 22
}
Row {
anchors.top:text05.bottom
anchors.topMargin: 2
anchors.horizontalCenter: text05.horizontalCenter
Rectangle {
color: isEndStation ? "#26a306" : "#209ef6"
width: 16
height: 16
radius: 2
y: 4
Text {
id: text06
anchors.centerIn: parent
text: isEndStation ? "终" : "过"
font.pixelSize: 10
color: "white"
}
}
Text {
id: text07
anchors.left: text06.right
anchors.verticalCenter: text06.verticalCenter
anchors.horizontalCenter: text06.horizontalCenter
text: toCity
font.pixelSize: 22
}
}
}
Rectangle {
width: parent.width * 0.3
height: parent.height
// color: "yellow"
Text {
id: text_cost
anchors.centerIn: parent
text: cost
font.pixelSize: 24
color: "#fc8302"
}
Text {
anchors.right: text_cost.left
anchors.rightMargin: 1
anchors.verticalCenter: text_cost.verticalCenter
text: "￥"
font.pixelSize: text_cost.font.pixelSize - 8
color: text_cost.color
}
Text {
anchors.left: text_cost.right
anchors.leftMargin: 1
anchors.verticalCenter: text_cost.verticalCenter
text: "起"
font.pixelSize: text_cost.font.pixelSize - 8
color: text_cost.color
}
}
}
Column {
width: parent.width
height: parent.height*0.3
Rectangle {
width: parent.width*0.95
height: 1
color : "whitesmoke"
anchors.horizontalCenter: parent.horizontalCenter
}
Row {
width: parent.width
height: parent.height
anchors {
leftMargin: 8
rightMargin: 8
topMargin: 2
bottomMargin: 2
}
Rectangle {
width: parent.width * 0.2333
height: parent.height
// color: "blue"
Text {
id: text_sec_label
text: "二等"
anchors.right : parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.family: "黑体"
}
Text {
id: text_sec_value
text: secend=="0张" ? "告罄" : secend
anchors.left: parent.horizontalCenter
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
color : "0张"==secend ? "gray" : "#26a306"
}
}
Rectangle {
width: parent.width * 0.2333
height: parent.height
// color: "red"
Text {
id: text_first_label
text: "一等"
anchors.right : parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.family: "黑体"
}
Text {
id: text_first_value
text: first=="0张" ? "告罄" : first
anchors.left: parent.horizontalCenter
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
color : "0张"==first ? "gray" : "#26a306"
}
}
Rectangle {
width: parent.width * 0.2333
height: parent.height
// color: "yellow"
Text {
id: text_notsi_label
text: "无座"
anchors.right : parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.family: "黑体"
}
Text {
id: text_notsi_value
text: notsi=="0张" ? "告罄" : notsi
anchors.left: parent.horizontalCenter
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
color : "0张"==notsi ? "gray" : "#26a306"
}
}
Rectangle {
width: parent.width * 0.3
height: parent.height
// color: "green"
}
}
}
}
}
model: modelDatas
}
}
// 提取时间部分的函数
function extractTime(fullDateTime) {
var parts = fullDateTime.split(" ");
if (parts.length >= 2) {
return parts[1]; // 返回时间部分
}
return fullDateTime;
}
// 计算时长的函数
function calculateDuration(beginTimeStr, endTimeStr) {
// 解析日期时间字符串
var beginParts = beginTimeStr.split(" ");
var endParts = endTimeStr.split(" ");
// 提取时间部分
var beginTime = beginParts[1];
var endTime = endParts[1];
// 解析小时和分钟
var beginHourMin = beginTime.split(":");
var endHourMin = endTime.split(":");
var beginHour = parseInt(beginHourMin[0]);
var beginMinute = parseInt(beginHourMin[1]);
var endHour = parseInt(endHourMin[0]);
var endMinute = parseInt(endHourMin[1]);
// 计算总分钟数
var totalBeginMinutes = beginHour * 60 + beginMinute;
var totalEndMinutes = endHour * 60 + endMinute;
// 计算时长（分钟）
var durationMinutes = totalEndMinutes - totalBeginMinutes;
// 如果跨天，加上24小时
if (durationMinutes < 0) {
durationMinutes += 24 * 60;
}
// 转换为小时和分钟
var hours = Math.floor(durationMinutes / 60);
var minutes = durationMinutes % 60;
// 格式化输出
if (hours > 0 && minutes > 0) {
return hours + "小时" + minutes + "分钟";
} else if (hours > 0) {
return hours + "小时";
} else {
return minutes + "分钟";
}
}
ListModel {
id: modelDatas
ListElement {
fromCity: "贵港"
toCity: "广州南"
beginTime: "2025-08-01 12:38"
endTime: "2025-08-01 15:38"
first: "有票" // 一等座
secend: "17张" // 二等座
notsi: "有票" // 无座
cost: 188 // 价格
tranId: "D3627"
isEndStation: false // 是否为终点站
}
// 可以添加更多数据
ListElement {
fromCity: "贵港"
toCity: "广州南"
beginTime: "2025-08-01 14:20"
endTime: "2025-08-01 17:15"
first: "有票"
secend: "0张"
notsi: "有票" // 无座
cost: 198
tranId: "D3622"
isEndStation: true // 是否为终点站
}
ListElement {
fromCity: "贵港"
toCity: "广州南"
beginTime: "2025-08-01 16:05"
endTime: "2025-08-01 19:10"
first: "0张"
secend: "有票"
notsi: "0张" // 无座
cost: 175
tranId: "D3637"
isEndStation: false // 是否为终点站
}
}
}
浙公网安备 33010602011771号