ボタンを上にあるテキストボックスに合わせてサイズを合わせる

Question

私はQt qmlを使用して、非常に単純なユーザーインターフェイスを設計しています。次のようにQMLは次のとおりです。

import QtQuick 2.0 
import QtQuick.Layouts 1.1 
import QtQuick.Controls 1.4 

Rectangle { 
    width: 800; height: 600  

    ColumnLayout { 
     anchors.centerIn: parent 
     spacing: 25 

     TextField { 
     placeholderText: qsTr("User name") 
     width: 200 
     } 

     TextField { 
     placeholderText: qsTr("Password") 
     width: 200 
     echoMode: TextInput.Password 
     } 

     RowLayout { 
      Button { 
       text: "Log In" 
      } 

      Button { 
       text: "Cancel" 
      }   
     } 
    } 
} 

私がやろうとしていますどのようなボタンの両方が同じサイズを取り、彼らが水平にTextFieldコンポーネントとして同じ量の空間を占有していることを確認しています。 QMLを使用してこれを達成することは可能ですか？

Answer 1

ただ、希望の幅にレイアウトのサイズを変更し、添付されたプロパティーLayout.fillWidth: trueを使用して、アイテムのサイズを拡大/縮小します。

import QtQuick 2.0 
import QtQuick.Layouts 1.1 
import QtQuick.Controls 1.4 

Rectangle { 
    width: 800; height: 600 

    ColumnLayout { 
     width: 200 
     anchors.centerIn: parent 
     spacing: 25 

     TextField { 
      placeholderText: qsTr("User name") 
      Layout.fillWidth: true 
     } 
     TextField { 
      placeholderText: qsTr("Password") 
      Layout.fillWidth: true 
      echoMode: TextInput.Password 
     } 
     RowLayout { 
      Button { 
       text: "Log In" 
       Layout.fillWidth: true 
      } 

      Button { 
       text: "Cancel" 
       Layout.fillWidth: true 
      } 
     } 
    } 
} 

PS：それは、Layout.fillWidthとLayout.fillHeightがデフォルトで設定されている子レイアウトでは不要だが、単に説明するためにあなたの例を更新しました。

ご質問がございましたら、お気軽にお問い合わせください。

Answer 2

はい、あなたは自分のTextField

TextField { 
    id: myTextField 
    ... 
} 

にidを与え、あなたのButtonであなたのTextFieldの幅を参照する必要があります。

Button{ 
    ... 
    width: myTextField.width 
}