QtQuick.Controls中的QML組合框樣式問題2.2

Question

我是初學者。我試圖使用組合框來填充元素列表，但是當我嘗試設置樣式時，顯示文本時出現了一些問題。 下面是代碼：

import QtQuick 2.7 
import QtQuick.Controls 2.2 

Item { 
    property string btntext : "First" 
    signal dropDownIndexChanged(int index) 

    id: mainDropDown 
    ListModel{ 
     id: modelList 
     ListElement{ text: "First" } 
     ListElement{ text: "Second" } 
     ListElement{ text: "Third" } 
    } 

    ComboBox { 
     id: comboButton 
     width: parent.width 
     height: parent.height 
     model:modelList 
     currentIndex: 0 
     editText : btntext 

     Image { 
      id: imageMainButton 
      x: 119 
      anchors.top: parent.verticalCenter 
      anchors.right: parent.right 
      anchors.rightMargin: 9 
      anchors.topMargin: -7 
      fillMode: Image.Tile 
      sourceSize.height: 25 
      sourceSize.width: 25 
      source: "<some image>" 
     } 
     delegate: ItemDelegate { 
      id:itemDelegate 
      width: comboButton.width 

      background:Rectangle{ 
       gradient: Gradient { 
        GradientStop { 
         position: 0.0 
         color: itemDelegate.down ? "white" : "blue" 
        } 
        GradientStop { 
         position: 1.0 
         color: itemDelegate.down ? "yellow" : "orange" 
        } 
       } 
      } 

      contentItem: Text { 
       text: modelData 
       elide: Text.ElideRight 

       horizontalAlignment: Text.AlignLeft 
       verticalAlignment: Text.AlignVCenter 
       font.pointSize: 11 
       font.family: "Arial" 
       color: itemDelegate.down ? "black" : "white" 
      } 
      highlighted: comboButton.highlightedIndex === index 

     } 

     indicator: Canvas { 
     } 



     //When this is added combo box text disapears or will be empty until something else is selected from the dropdown. 
     contentItem: Text { 
      text: comboButton.displayText 
      anchors.centerIn: parent 

      //font: comboButton.font 
      horizontalAlignment: Text.AlignLeft 
      verticalAlignment: Text.AlignVCenter 
      elide: Text.ElideRight 

      renderType: Text.NativeRendering 
      anchors.left : parent.left 
      anchors.leftMargin: 10 
      font.family: "Verdena" 
      font.pointSize: 12 
      font.bold: true 
      color: "white" 
     } 


     background: Rectangle { 
      implicitWidth: 120 
      implicitHeight: 40 
      radius: 2 

      color : "white" 
      //height:100 
      smooth: true 
      //border.width: 1 
      border.color: "white" 


     } 

     popup: Popup { 
      y: comboButton.height 
      width: comboButton.width -5 
      //implicitHeight: contentItem.implicitHeight -1 
      padding: 1 

      background: Rectangle { 
       border.color: "black" 
       radius: 2 
       color : "white" 
      } 

      contentItem: ListView { 
       //clip: true 
       implicitHeight: contentHeight 
       model: comboButton.popup.visible ? comboButton.delegateModel : null 
       currentIndex: comboButton.highlightedIndex 
       interactive: false 

      } 
     } 

     onCurrentIndexChanged: 
     { 
      btntext = mainDropDown.get(currentIndex).text 
      dropDownIndexChanged(currentIndex) 
      console.log(btntext ,currentIndex) 
     } 
    } 
} 

1）如上爲什麼不顯示組合框的文本，直到我選擇從下拉菜單中的項目提到？

2）選定的索引/項目根本沒有突出顯示。

Answer 1

1）如上所述，爲什麼組合框文本不顯示，直到我從下拉菜單中選擇一個項目？

這是因爲您的背景矩形顏色是「白色」，與您的文本顏色相同（「白色」是默認顏色）。

2）選定的索引/項目根本沒有突出顯示。

這是因爲裏面委託（ID：itemDelegate），您可以根據itemDelegate.down狀況正在改變顏色。將其更改爲itemDelegate.highlighted。