2017-11-13 15 views
3

QMLでは、限られたスペースにテキストを収めたいと思います。このテキストには、ローカライズされた静的な変数部分(ファイル名)が含まれています。可変部分は、私が持っている空間に収まるには時間がかかりすぎる可能性があり、その場合は省略すべきです。最初の部分は新しい行に折り返すことが許され、ローカライズされた部分はそうするかもしれません。QML複数行のフローの最後の行の残りの幅を使用テキスト

私の問題は次のとおりです。両方のテキストは、静的テキストにファイル名を追加する目的で、フローコンテナにあります。しかし、最初のテキスト部分が折り返された場合、最初の部分の最後の行が完全にスペースを埋めるわけではないにもかかわらず、テキスト全体が利用可能な最大幅を持ち、ファイル名は新しい行に置かれます。この画像を参照してください。

filename wrapping to new line, even though last line is not filled

コード:

Flow { 
    width: parent.width 
    spacing: 4 
    Text { 
     width: (contentWidth <= parent.width) ? contentWidth : parent.width 
     text: qsTr("A string that might or might not wrap, depending on localisation") 
     wrapMode: Text.WordWrap 
    } 
    Text { 
     width: (contentWidth <= parent.width) ? contentWidth : parent.width 
     text: fileName 
     color: customColor 
     elide: Text.ElideMiddle 
     // ... more options 
     MouseArea { 
      anchors.fill: parent 
      onClicked: //stuff 
     } 
    } 
} 

それが最後の行の残りのスペースを使用することは可能ですか?

EDIT:これは、それが見えるようになっています方法です:私が思いついた

how the text should be formatted

+0

※画像はどのように*追加してもよろしいですか? – derM

+1

質問を更新しました –

答えて

1

唯一の方法は非常にハックです。

問題は、Textが1つのオブジェクトで、周囲に四角いバウンディングボックスがあります。このバウンディングボックスは、位置決めのためにFlowによって使用されます。

私のハックな解決策の背後にあるアイデアは、1つの単語でテキストを分割し、次にFlowによって配置されるということです。今度はFlowは最後の単語がどこで終了したかを知っているので、そのすぐ後ろにTextを置くことができます。

Flow { 
    id: flw 
    property string text: "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
    width: 300 
    spacing: fnt.advanceWidth(' ') 

    FontMetrics { 
     id: fnt 
    } 

    Repeater { 
     id: rep 
     model: flw.text.split(' ') 
     delegate: Text { 
      font: fnt.font 
      text: modelData 
     } 
    } 

    Text { 
     text: "C:/Some/Path/To/The/File/In/Question/File.extension" 
     color: 'green' 
     width: { 
      var neighbor = rep.itemAt(rep.count - 1) 
      parent.width - neighbor.x - neighbor.width - parent.spacing 
     } 
     elide: Text.ElideMiddle 
    } 
} 
関連する問題