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" 
     } 
    }