Qml练习：仿有道词典界面

最新推荐文章于 2021-10-12 07:00:00 发布

「已注销」

最新推荐文章于 2021-10-12 07:00:00 发布

阅读量296

点赞数

分类专栏： Qt

本文链接：https://blog.csdn.net/ssspppfff/article/details/103737383

版权

本人刚开始学习，主要是熟悉下布局和控件使用。代码比较混乱，没有封装组件。
实现效果：
主界面插了张图片
代码：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window{
   
    id:root
    width: 1000
    height: 750
    visible: true
    Column{
   
        Rectangle{
   
            id:top
            color: "#DB3E3E"
            width: root.width
            height:75

            Image {
   
                id: logo
                scale: 0.5
                source: "./icons/logo.png"
                anchors.left: parent.left
                anchors.leftMargin: -40
                anchors.verticalCenter: top.verticalCenter
            }

            Button{
   
                id:prevBtn
                display: Button.IconOnly
                icon {
   
                    width:10
                    height:width
                    color: down?"gray":"white"
                    source:"icons/prev.png"
                }
                background: Rectangle{
   
                    anchors.fill: parent
                    color: "transparent"
                }
                anchors.verticalCenter: top.verticalCenter
                anchors.left: logo.right
                anchors.leftMargin: -40
            }
            Button{
   
                id:nextBtn
                display: Button.IconOnly
                icon {
   
                    width:10
                    height:width
                    color: down?"gray":"white"
                    source:"icons/next.png"
                }
                background: Rectangle{
   
                    anchors.fill: parent
                    color: "transparent"
                }
                anchors.verticalCenter: top.verticalCenter
                anchors.left: prevBtn.right
                anchors.leftMargin: 10