2012-06-06 15 views
6

Tengo un qml que actúa como salida de la aplicación (algo así como una consola de solo lectura). Sin embargo, es molesto de usar porque a medida que imprime información se desplaza hacia atrás hasta la parte superior.Recordar la posición de desplazamiento en el elemento QML

Por ejemplo, digamos que imprimo una línea en mi TextArea cada segundo, después de un minuto más o menos, tendré suficientes líneas que ahora tengo una barra de desplazamiento. Me desplazo hacia abajo, un segundo después, se imprime una línea de texto que hace que se desplace hacia atrás.

La funcionalidad deseada que me gustaría es desplazarse automáticamente a la parte inferior (muy parecido a cómo es una consola cuando imprime cosas) a menos que el usuario anule esto desplazándose hacia arriba, entonces el texto debería permanecer en el lugar. Espero que tenía sentido, he aquí algo de código:

 ScrollArea { 
      id: helpTextScrollArea 
      anchors.left: parent.left 
      anchors.right: parent.right 
      anchors.top: myButton.bottom 
      anchors.topMargin: 5 
      anchors.bottom: parent.bottom 
      visible: false 
      horizontalScrollBar.visible: false 

      onVisibleChanged: { 
       helpText.visible = visible 
      } 

      HelpTextArea { 
       id: helpText 
       width: parent.parent.width - helpTextScrollArea.verticalScrollBar.width 
       text: "Oops, no documentation." 

       onVisibleChanged: { 
        if(helpTextScrollArea.visible != visible) { 
         helpTextScrollArea.visible = visible 
        } 
       } 
      } 
     } 

     Flickable 
     { 
      id: flick 

      anchors.left: parent.left 
      anchors.right: parent.right 
      anchors.top: runStopButton.bottom 
      anchors.bottom: parent.bottom 
      anchors.topMargin: 5 


      TextArea{ 

       id: messageArea 
       anchors.fill: parent 

       focus: true 

       readOnly: true 

       visible: !helpTextScrollArea.visible 

       wrapMode: TextEdit.Wrap 

       function addText(newText) { 
        text += newText + "\n" 
       } 
      } 
     } 

Nota: No creo que mi flickable hace nada, que era parte de mi experimentación para solucionar el problema. Además, utilizo la función addText para imprimir en el área de texto. Casi no sé nada sobre qml y la mayoría de este código fue escrito por otra persona y estoy tratando de trabajar con él. ¡Gracias!

Respuesta

3

Puede enlazar contentY propiedad de Flickable a una expresión que calcule la posición correcta.

Flickable { 
    id: flick 
    states: State { 
     name: "autoscroll" 
     PropertyChanges { 
      target: flick 
      contentY: messageArea.height - height 
     } 
    } 
    onMovementEnded: { 
     if (contentY === messageArea.height - height) { 
      state = "autoscroll" 
     } 
     else { 
      state = "" // default state 
     } 
    } 
    // ... 
} 
2

flickable tiene 4 propiedades de sólo lectura en la llamada visibleArea * (se puede leer su significado en la documentación QML):.

  • visibleArea.xPosition: xPosition = contentX/contentWidth
  • visibleArea.yPosition: yPosition = contentY/contentHeight
  • visibleArea.widthRatio: widthRatio = anchura/contentWidth
  • visibleArea.heightRatio: heightRatio = altura/contentHeight
0

Si está utilizando GridView en lugar de flickable, puede utilizar estos métodos.

positionViewAtBeginning() 

positionViewAtEnd() 

positionViewAtIndex(int index, PositionMode mode) 

He encontrado estos a ser realmente útil, como cuando se está añadiendo la línea de texto, simplemente llame al método positionViewAtEnd() interior de la GridView.

Espero que ayude

Cuestiones relacionadas