QML：帶有圖像和下方文本的按鈕

Question

我試圖在QML中創建一個像控件一樣的按鈕，其中顯示圖像以及其下的一些文本。我目前的嘗試如下：

Item { 
     id: button 
     width: 30 
     height: 100 
     property alias text: buttontext 
     signal clicked 

     Image { 
      id: visualImage 
      anchors.fill: parent 
      source: "qrc:/images/test.png" 
     } 

     Text { 
      id: buttontext 
      font.bold: true 
      text: "Test" 
     } 
    } 

不幸的是，這有很多問題。所以，此刻，我指定了項目的寬度和高度，但應根據圖像和文本的寬度和高度進行計算。此外，文本顯示在圖像的頂部和內部，我想將圖像放置在圖像下方，圖像以圖像爲中心並水平放置一些邊距。

Answer 1

Yuo必須在圖像和文本中使用錨點。例如：

Item { 
     id: button 
     width: 30 
     height: 100 
     property alias text: buttontext 
     signal clicked 

     Image { 
      id: visualImage 
      anchors.top: parent.top 
      anchors.left: parent.left 
      anchors.right: parent.right 
      anchors.bottom: buttontext.top 
      source: "qrc:/images/test.png" 
     } 

     Text { 
      id: buttontext 
      anchors.left: parent.left 
      anchors.right: parent.right 
      anchors.bottom: parent.bottom 
      font.bold: true 
      text: "Test" 
     } 
    }