StackView加载自定义组件

最新推荐文章于 2025-12-25 09:07:35 发布

原创最新推荐文章于 2025-12-25 09:07:35 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #qt #开发语言

这个博客展示了如何在Qt环境中利用QtQuick Controls和StackView组件创建一个动态的界面，通过点击事件改变堆叠视图的内容。内容涉及到QtQuick的导入、颜色随机生成、自定义组件以及JavaScript的交互，体现了Qt界面编程的灵活性。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
   title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       Component{
           id:rectPage
           Rectangle{
               MouseArea{
                   anchors.fill: parent
                   onClicked: {
                       stack.pop()
                   }
               }
               Component.onCompleted: {
                   console.log('yes')
               }
           }
       }
        Component{
            id:jieDateTimeLabel
            JieDateTimeLabel{
                colorBuilder: jieItem.colorBuilder
                text:'ie Stack'

                MouseArea{
                    anchors.fill:parent
                    onClicked: stack.pop()
                }
            }
        }

       StackView{
         id:stack
         anchors.fill:parent
          initialItem: Component{
                       Rectangle{
                           color: jieItem.colorBuilder()
                        MouseArea{
                            anchors.fill:parent
                            onClicked: {
                                //stack.push(rectPage,{color:jieItem.colorBuilder()})
                                //stack.push(jieDateTimeLabel)
                                stack.push('./JieDateTimeLabel.qml',{colorBuilder:jieItem.colorBuilder,text:'Jie test'})
                            }
                        }
                       }
                       }
     }
   }

}