207 lines
6.3 KiB
QML
207 lines
6.3 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Window
|
|
import QtQuick.Controls
|
|
import QtQuick.Controls.Basic
|
|
import QtWebEngine 1.2
|
|
import FluentUI
|
|
|
|
FluArea {
|
|
paddings: 0
|
|
color: "#f9f9f9"
|
|
|
|
// paddings: {
|
|
// top: 10
|
|
// right: 0
|
|
// bottom: 10
|
|
// left: 10
|
|
// }
|
|
FluScrollablePage {
|
|
id: contentPage
|
|
anchors.fill: parent
|
|
leftPadding: 10
|
|
topPadding: 10
|
|
rightPadding: 10
|
|
bottomPadding: 0
|
|
|
|
property int knowledgeFileId
|
|
property int likeCount: 0
|
|
property int favoriteCount: 0
|
|
property int shareCount: 0
|
|
property int browsCount: 555
|
|
property bool isLike: false
|
|
property bool isFavorite: false
|
|
property double fileSize: 455
|
|
property list<string> tags: ["tag 1", "tag 2", "tag 3"]
|
|
property date publishTime: new Date()
|
|
property string brief: "这是一个简介"
|
|
property string type: null
|
|
property var contentShow
|
|
|
|
Component.onCompleted: {
|
|
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
implicitHeight: 50
|
|
|
|
FluText {
|
|
id: text_title
|
|
padding: 10
|
|
text: "文章标题"
|
|
font {
|
|
pointSize: 15
|
|
bold: true
|
|
}
|
|
}
|
|
ColumnLayout {
|
|
id: layout_share
|
|
FluIconButton {
|
|
id: button_share
|
|
iconSize: 15
|
|
iconSource: FluentIcons.Share
|
|
text: contentPage.shareCount.toString()
|
|
}
|
|
FluText {
|
|
id: text_share
|
|
text: contentPage.shareCount
|
|
font.pointSize: 8
|
|
anchors {
|
|
horizontalCenter: button_share.horizontalCenter
|
|
top: button_share.bottom
|
|
}
|
|
}
|
|
anchors {
|
|
verticalCenter: text_title.verticalCenter
|
|
right: parent.right
|
|
}
|
|
}
|
|
ColumnLayout {
|
|
id: layout_favorite
|
|
FluIconButton {
|
|
id: button_favorite
|
|
iconSize: 15
|
|
iconSource: contentPage.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
|
|
}
|
|
FluText {
|
|
id: text_favorite
|
|
text: contentPage.favoriteCount
|
|
font.pointSize: 8
|
|
anchors {
|
|
horizontalCenter: button_favorite.horizontalCenter
|
|
top: button_favorite.bottom
|
|
}
|
|
}
|
|
anchors {
|
|
verticalCenter: text_title.verticalCenter
|
|
right: layout_share.left
|
|
}
|
|
}
|
|
ColumnLayout {
|
|
id: layout_like
|
|
FluIconButton {
|
|
id: button_like
|
|
iconSize: 15
|
|
iconSource: contentPage.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
|
|
}
|
|
FluText {
|
|
id: text_like
|
|
text: contentPage.favoriteCount
|
|
font.pointSize: 8
|
|
anchors {
|
|
horizontalCenter: button_like.horizontalCenter
|
|
top: button_like.bottom
|
|
}
|
|
}
|
|
anchors {
|
|
verticalCenter: text_title.verticalCenter
|
|
right: layout_favorite.left
|
|
}
|
|
}
|
|
FluIconButton {
|
|
id: button_download
|
|
iconSize: 25
|
|
iconSource: FluentIcons.Download
|
|
anchors {
|
|
verticalCenter: text_title.verticalCenter
|
|
right: layout_like.left
|
|
rightMargin: 20
|
|
}
|
|
onClicked: function () {}
|
|
}
|
|
}
|
|
|
|
FluMediaPlayer {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
Text {
|
|
id: textMd
|
|
text: contentPage.contentMd
|
|
textFormat: TextEdit.MarkdownText
|
|
focus: true
|
|
}
|
|
WebEngineView {
|
|
id: sitemonitoryView
|
|
backgroundColor: "transparent"
|
|
implicitHeight: 200
|
|
Layout.fillWidth: true
|
|
settings.javascriptEnabled: true
|
|
settings.pluginsEnabled: true
|
|
url: "https://www.baidu.com"
|
|
}
|
|
|
|
FluArea {
|
|
Layout.fillWidth: true
|
|
implicitHeight: 100
|
|
ColumnLayout {
|
|
RowLayout {
|
|
FluText {
|
|
padding: 10
|
|
text: contentPage.publishTime.toDateString()
|
|
}
|
|
FluText {
|
|
padding: 10
|
|
text: contentPage.fileSize.toString() + "MB"
|
|
}
|
|
FluText {
|
|
padding: 10
|
|
text: contentPage.browsCount.toString() + "浏览量"
|
|
}
|
|
}
|
|
FluText {
|
|
Layout.topMargin: -2
|
|
Layout.leftMargin: 10
|
|
text: contentPage.brief
|
|
}
|
|
RowLayout {
|
|
Layout.topMargin: 2
|
|
Layout.leftMargin: 5
|
|
Repeater {
|
|
model: contentPage.tags
|
|
delegate: Button {
|
|
Layout.margins: 2
|
|
text: "#" + contentPage.tags[index]
|
|
background: Rectangle {
|
|
implicitHeight: 10
|
|
implicitWidth: 10
|
|
color: FluColors.Grey20
|
|
radius: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
FluText {
|
|
Layout.topMargin: 10
|
|
text: "笔记"
|
|
font {
|
|
pointSize: 15
|
|
bold: true
|
|
}
|
|
}
|
|
}
|
|
}
|