JavaFX - CSS styling listview

前端 未结 1 1509
盖世英雄少女心
盖世英雄少女心 2020-12-14 20:37

I have a ListView and want the following:

  • Odd rows with white background color;
  • ListView: when mouse over an item, highlight with a blue shade;
  • <
相关标签:
1条回答
  • 2020-12-14 21:22

    EDIT:

    Slightly changing your css:

    .list-cell:filled:selected:focused, .list-cell:filled:selected {
        -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
        -fx-text-fill: white;
    }
    
    .list-cell:even { /* <=== changed to even */
        -fx-background-color: white;
    }
    
    .list-cell:filled:hover {
        -fx-background-color: #0093ff;
        -fx-text-fill: white;
    }
    

    This css produces the following presentation:

    ListView presentation variant 1

    Does this give what you expect?

    I changed odd to even. The first cell is even, because its index value is 0 (zero). Also -fx-cell-hover-color is not valid. I changed it to -fx-background-color where needed or removed it.


    Original text: (note that this has different interpretation of odd/even)

    My take would be this:
    (I included your requirements in a numbered list for reference in the css. I also made the gradient more obvious and added a green background for even cells.)

    /*
    1. Odd rows with white background color;
    2. ListView: when mouse over an item, highlight with a blue shade;
    3. ListView: when an item is selected, paint it with a gradient;
    4. ListView: when focus is lost from ListView, selected item should be painted with gradient;
    5. ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
    */
    
    .list-cell:filled:selected:focused, .list-cell:filled:selected {
        /* 3:, 4: */
        -fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%);
        -fx-text-fill: white; /* 5 */
    }
    .list-cell { -fx-text-fill: black; /* 5 */ }
    .list-cell:odd { -fx-background-color: white; /* 1 */ }
    .list-cell:even { -fx-background-color: #8f8; /* for information */ }
    .list-cell:filled:hover { 
        -fx-background-color: #00f; /* 2 */
        -fx-text-fill: white; /* 5 */
    }
    

    This leads to this rendering:

    ListView rendering variant 2

    0 讨论(0)
提交回复
热议问题