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. Figure with editable input fields for entering dimensions
Forum Updated to NodeBB v4.3 + New Features

Figure with editable input fields for entering dimensions

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 174 Views
  • 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.
  • M Offline
    M Offline
    m3g1dd
    wrote on last edited by m3g1dd
    #1

    I want to have such a figure with editable input fields to enter the dimensions:

    Figure with editable input fields for dimensions

    Changing the input fields will cause the figure to readjust according to newly entered dimensions.

    Question

    Does QML have any feature which might help with implementing the above, which I might be missing?

    Update

    Sometimes the shapes are not rectangles:

    Non-rectangle shape

    1 Reply Last reply
    0
    • J.HilkJ Online
      J.HilkJ Online
      J.Hilk
      Moderators
      wrote on last edited by J.Hilk
      #2

      You have TextInputs or editable spinboxes where you just (property)bind the value to the related value of the shape?


      example:

      import QtQuick 2.12
      import QtQuick.Controls 2.12
      import QtQuick.Window 2.2
      
      Window
      {
          visible: true
          width: 640
          height: 480
          title: qsTr("Hello World")
          color: "white"
          id: win
      
          Rectangle{
              id:shape
              anchors.centerIn: parent
      
              color: "lightblue"
      
              width: 200
              height: 250
          }
      
          TextInput {
              anchors.right: shape.left
              anchors.verticalCenter: shape.verticalCenter
              width: 200
              text: shape.height
              onTextChanged: shape.height = text
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignRight
          }
          TextInput{
              anchors.top: shape.bottom
              anchors.horizontalCenter: shape.horizontalCenter
              width: shape.width
              height: contentHeight
              text: shape.width
              onTextChanged: shape.width = text
      
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignHCenter
          }
      
      }
      
      

      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      1 Reply Last reply
      1

      • Login

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