2

TextEdit と TextInput の 2 つのコントロールを持つ QML を使用して単純なウィンドウを作成しようとしています。TextInput (単一) を親ウィンドウの下部に固定しようとしていますが、TextEdit (複数行) は TextInput の上のサイズ変更可能なコントロールです。単一行の textInput は、親の幅に合わせてサイズ変更できますが、複数行の TextEdit は、TextInput の上の画面の残りの部分を埋めるようにサイズ変更できます。

これは私がこれまでに持っているものです:

import QtQuick 1.0

Item {
    id: container
    width: 500
    height: 400
    TextEdit {
        color: "red"
        id:outputWindow
        anchors.top: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: inputWindow.bottom
        wrapMode: Text.Wrap
        text: "Welcome"
    }

    TextInput {
        color:"blue"
        id:inputWindow
        anchors.left: parent.left
        anchors.right: parent.right
        //anchors.top: outputWindow.bottom
        anchors.bottom: parent.bottom
        text: "Input here"
        focus:true
    }
}

inputWindow (2 番目のコントロール) を親の下 (および左/右) に固定し、outputWindow (1 番目のコントロール) を親の上/左/右に固定したいと考えています。親が垂直方向にサイズ変更されると、outputWindow は使用可能なスペースを埋めるために垂直方向にサイズ変更されます。これは上記のコードを使用すると発生しません。inputWindow が outputWindow の下部にくっついて移動します。

QT UI ファイルを使用してこれを簡単に行うことができますが、QML を使用してこれを行う方法に関する情報を広範囲に検索した後、ここで質問する必要があります。どんな助けでも大歓迎です。ありがとう。

4

4 に答える 4

2

outputWindow 定義にいくつかの小さなエラーがあります

TextEdit {
    color: "red"
    id:outputWindow
    anchors.top: parent.top // anchor to top of parent
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: inputWindow.top // anchor bottom to top of input window
    wrapMode: Text.Wrap
    text: "Welcome"
}

このように、outputWindow はコンテナーの上部から開始し、inputWindow で終了します。

于 2011-05-07T09:13:44.877 に答える
2

正しいanchorsを使用wrapModeし、 と を使用するだけclipです。

import QtQuick 1.1

Item {
    id: container;
    width: 500;
    height: 400;

    TextEdit {
        color: "red";
        id:outputWindow;
        anchors.top: parent.top;
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: inputWindow.top;
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere;
        text: new Array(100).join("Welcome\n"); // dumb content to show layout
        clip: true;
    }
    TextInput {
        id: inputWindow;
        color:"blue"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        text: "Input here";
        focus: true;
    }
}
于 2013-03-27T13:27:03.683 に答える
1

列はできるだけ行にします。さまざまな UI 要素をレイアウトする際に最も効果的であることがわかりました。また、アイテムを同じレベルの他のアイテムに固定することは常に機能するとは限りません。親に固定するのがベストプラクティスだと思います。

于 2011-05-07T22:36:38.053 に答える
1 
 TextEdit {
        color: "red"
        id:outputWindow

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        height : parent.height - inputWindow.height //replace bottom anchor with this

        wrapMode: Text.Wrap
        text: "Welcome"
    }
于 2011-07-27T11:48:24.050 に答える