web-dev-qa-db-ja.com

QMLで要素の中心、ラップ、およびパディングされたコンテナを作成する方法は？

ページの垂直方向および水平方向の中央に配置され、余白が埋め込まれ、その中の要素が等間隔で中央に配置され、必要に応じてラップされる要素を達成しようとしています。だから本質的に私はこのようなことを達成しようとしている：

Centred, wrapped and padded

しかし、残念ながら、画面が縮小すると、テキストはパディングもラップするスターも保持しません。

Why you no wrap and missing padding

理想的には、テキストの両方の段落の周りに1単位のパディングと、2つの段落とすべての中央揃え/折り返しの間の1単位の間隔が必要です。

幅/高さのプロパティを計算して設定しようとしましたが、何もしませんでした。

ここに私のコードがあります：

    Tab {
        objectName: "Tab2"

        title: i18n.tr("Title")
        page: Page {
            anchors.fill: parent
            Item {
                anchors.centerIn: parent
                Text {
                    id: text1
                    text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus"
                    wrapMode: Text.Wrap
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                }
                Text {
                    text: "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                    wrapMode: Text.Wrap
                    width: parent.width
                    anchors {
                        top: text1.bottom
                        topMargin: units.gu(2)
                    }
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }
    }
application-developmentqmlubuntu-sdk
2
Dima

アイテムには幅と高さが定義されていないため、子の高さと折り返しが必要です。

このコードはおそらくあなたが望むことをしますが、おそらくいくつかのマージンを微調整する必要があります：

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: 800
    height: 600
    Tabs {
        Tab {
            objectName: "Tab2"

            title: i18n.tr("Title")
            page: Page {
                Item {
                    anchors.fill: parent
                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                            verticalCenter: parent.verticalCenter
                        }
                        id: text1
                        text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus\n\n" +
                              "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }
                }
            }
        }
    }
}

2つのテキストアイテムを別々にしたい場合は、列を使用することもできます。

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: 800
    height: 600
    Tabs {
        Tab {
            objectName: "Tab2"

            title: i18n.tr("Title")
            page: Page {
                Column {
                    spacing: units.gu(2)
                    anchors {
                        left: parent.left
                        right: parent.right
                        verticalCenter: parent.verticalCenter
                    }
                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                        }
                        id: text1
                        text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus"
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }

                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                        }
                        id: text2
                        text: "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }

                }
            }
        }
    }
}
3
timp