Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to implement custom titlebar?
Forum Updated to NodeBB v4.3 + New Features

How to implement custom titlebar?

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 3 Posters 10.5k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Q Offline
    Q Offline
    qiezi
    wrote on last edited by
    #1

    This is an example:
    @Rectangle {
    width: 800
    height: 600
    Rectangle {
    id: titlebar
    width: parent.width
    height: 50
    color: "#0000ff"
    }
    }@

    It loaded by QDeclarativeView in a subclass of QMainWindow, the window without default titlebar.

    How to implement the TitleBar with drag-move function?

    1 Reply Last reply
    0
    • C Offline
      C Offline
      Chuck Gao
      wrote on last edited by
      #2

      So you understand your qml view is in a QMainWindow based class. If you want to drag and move your window, it's actually need moving your mainWindow. So the way to do this is:

      1. Have a mouseArea in your titlebar
      2. When pressed and mousePositionChanged, emit the a signal to your mainWindow, and let your mainWindow to handle the moving staff.

      Btw, what's the app target for? Symbian ?Desktop?

      Chuck

      1 Reply Last reply
      0
      • Q Offline
        Q Offline
        qiezi
        wrote on last edited by
        #3

        [quote author="Chuck.Gao" date="1309355528"]So you understand your qml view is in a QMainWindow based class. If you want to drag and move your window, it's actually need moving your mainWindow. So the way to do this is:

        1. Have a mouseArea in your titlebar
        2. When pressed and mousePositionChanged, emit the a signal to your mainWindow, and let your mainWindow to handle the moving staff.

        Btw, what's the app target for? Symbian ?Desktop?[/quote]

        Thanks for you help, I solved it.

        It's a desktop application.

        1 Reply Last reply
        0
        • A Offline
          A Offline
          Aleskey78
          wrote on last edited by
          #4

          Or you can handle mousePositionChanged on QML side.
          @QmlApplicationViewer viewer;
          ...
          viewer.rootContext()->setContextProperty("mainwindow", &viewer);@

          @TitleBar { id: titleBar; width: parent.width; height: 40; opacity: 0.9
          MouseArea {
          id: mouseRegion
          anchors.fill: parent;
          property variant clickPos: "1,1"
          onPressed: {
          clickPos = Qt.point(mouse.x,mouse.y)
          }
          onPositionChanged: {
          var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
          mainwindow.pos = Qt.point(mainwindow.pos.x+delta.x,
          mainwindow.pos.y+delta.y)
          //console.log(mouse.x-clickPos.x,mouse.y-clickPos.y)
          }
          }
          }@

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved