使用QML开发的页面分享（1）

作者：大后天是星期天

社交：待定

公众号：待定

特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

登陆页面截图

相关代码

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
import "qrc:///example/qml/component"

FluContentPage {
    id: root

    title: "登录"

    Rectangle {
        anchors.fill: parent

        Rectangle {
            height: 500
            width: 400
            anchors.centerIn: parent
            radius: 20
            color: Qt.rgba(255 / 255, 255 / 255, 255 / 255, 0.5)

            ColumnLayout {
                anchors.fill: parent

                FluText {
                    Layout.topMargin: 25
                    text: "超级数据平台"
                    font: FluTextStyle.Title
                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                    color: "#0aacf1"
                }

                FluTextBox {
                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                    implicitWidth: 300
                    implicitHeight: 50
                    Layout.topMargin: 25
                    placeholderText: "用户名"
                }

                FluTextBox {
                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                    implicitWidth: 300
                    implicitHeight: 50
                    Layout.topMargin: 25
                    placeholderText: "密码"
                }

                RowLayout {
                    id: captcha_layout

                    height: 50
                    width: 400
                    Layout.topMargin: 25

                    FluTextBox {
                        Layout.leftMargin: 50
                        implicitWidth: 150
                        implicitHeight: 50
                        placeholderText: "验证码"
                    }

                    FluCaptcha {
                        id: captcha

                        Layout.rightMargin: 50
                        implicitWidth: 150
                        implicitHeight: 50
                        ignoreCase: true

                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                captcha.refresh();
                            }
                        }
                    }
                }

                Rectangle {
                    height: 40
                    color: Qt.rgba(255 / 255, 255 / 255, 255 / 255, 0)
                    Layout.fillWidth: true
                    Layout.topMargin: 20

                    FluCheckBox {
                        anchors.left: parent.left
                        anchors.leftMargin: 50
                        text: "记住密码"
                    }

                    FluTextButton {
                        anchors.right: parent.right
                        anchors.rightMargin: 50
                        text: "忘记密码?"
                        onClicked: {
                            Qt.openUrlExternally("https://www.baidu.com");
                        }
                    }
                }

                FluFilledButton {
                    Layout.topMargin: 50
                    implicitHeight: 40
                    implicitWidth: 200
                    text: "登陆"
                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                    font: FluTextStyle.BodyStrong
                    normalColor: "#48b3f6"
                }

                Item {
                    Layout.fillHeight: true
                }
            }
        }

        gradient: Gradient {
            GradientStop {
                position: 0
                color: Qt.rgba(34 / 255, 193 / 255, 195 / 255, 0.3)
            }

            GradientStop {
                position: 0.59
                color: Qt.rgba(163 / 255, 189 / 255, 107 / 255, 0.49)
            }

            GradientStop {
                position: 1
                color: Qt.rgba(253 / 255, 187 / 255, 45 / 255, 0.2)
            }
        }
    }
}

说明介绍

• 本代码在zhuzichu520/PySide6-FluentUI-QML框架下进行开发
• 只编写了界面部分代码，登陆逻辑没有实现
• 刚接触QML，同时会些Python，感觉使用QML开发界面确实非常方便，学习起来也非常简单
• 使用PySide6-FluentUI-QML过程中也存在一些问题不知道怎么解决

1. • FluTextButton设置radius圆角不太会设置
2. • FluCaptcha设置大小过小后会截取掉字符（字符没有随着FluCaptcha大小变化）