在javafx Listview中隱藏垂直滾動條

Question

我已經嘗試了幾個小時，似乎無法在任何地方找到答案。 我有2個與同一列表視圖相關的問題，1個比另一個更嚴重。

我試圖匹配java中提供給我的設計。 列表視圖應如下所示

這是從設計

目前我已經到了

我目前的努力

我創建了一個自定義ListCell來保存所有視圖（還沒有重構，所以可能看起來有些不整潔）

import HolderClasses.MenuItem;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;

public class CustomListCell extends ListCell<MenuItem>{

    private Image mImage;
    private String mText;
    private AnchorPane background;
    private ImageView imageHolder;
    private VBox colourStrip;
    private Label mTextLabel;

    public CustomListCell(){

        background = new AnchorPane();
        imageHolder = new ImageView();
        mTextLabel = new Label();
        imageHolder.setFitHeight(40.0);
        imageHolder.setFitWidth(40.0);
        imageHolder.getStyleClass().add("listCellImage");
        mTextLabel.getStyleClass().add("listCellText");
        AnchorPane.setLeftAnchor(imageHolder, 10.0);
        AnchorPane.setTopAnchor(imageHolder, 10.0);
        AnchorPane.setBottomAnchor(imageHolder, 10.0);
        AnchorPane.setLeftAnchor(mTextLabel, 80.0);
        AnchorPane.setRightAnchor(mTextLabel, 1.0);
        AnchorPane.setTopAnchor(mTextLabel, 0.0);
        AnchorPane.setBottomAnchor(mTextLabel, 0.0);
        colourStrip = new VBox();
        colourStrip.setMinWidth(0.0);
        colourStrip.setMaxWidth(2.0);
        colourStrip.setPrefWidth(2.0);
        colourStrip.getStyleClass().add("listCellColourStrip");
        AnchorPane.setRightAnchor(colourStrip, 0.0);
        AnchorPane.setTopAnchor(colourStrip, 0.0);
        AnchorPane.setBottomAnchor(colourStrip, 0.0);

        background.getChildren().addAll(mTextLabel, imageHolder, colourStrip);        

    }

    @Override
    protected void updateItem(MenuItem item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            //remove all the views
            setText(null);
            setGraphic(null);
        } else {
            //set all the views
            imageHolder.setImage(item.getImage());
            mTextLabel.setText(item.getText());
            setText(null);  
            setGraphic(background);            
        }
    }

}

我的CSS是

.list-cell {

    -fx-background-color: #FCFCFC;
    -fx-background-insets: 0 0 1 0;
}

.list-cell:empty {
    -fx-background-color: #FCFCFC;
    -fx-background-insets: 0 ;
}

.list-cell:selected .listCellColourStrip{

    -fx-background-color: #CF000F;

}

.list-cell:selected {

    -fx-background-color: #FFFFFF;

}

.list-view .scroll-bar:vertical .increment-arrow,
.list-view .scroll-bar:vertical .decrement-arrow,
.list-view .scroll-bar:vertical .increment-button,
.list-view .scroll-bar:vertical .decrement-button {
    -fx-padding: 0px;
}

.list-view .scroll-bar:vertical {
    -fx-padding: 0px;
}

.listCellImage {    
    -fx-opacity: 0.4;    
}

.listCellText{    
    -fx-font-size: 1.5em;
    -fx-text-fill: #888;
    -fx-font-family: "Museo Sans 500";   
}

簡而言之，我已經設法移除了滾動條，但滾動條占用的空間似乎仍然在它消失之后被占用，我不能在我的生活中獲得紅色條顯示在單元格的最后。

原始設計靈感來自Android列表視圖，其中滾動條放置在內容的頂部，拇指在滾動時是半透明的，而在不滾動時是不可見的。 理想情況下我也希望實現這一點，但如果紅線可以放在最后，沒有滾動條是可接受的折衷方案。

我已經探索過使用ScrollPane和標准的AnchorPane而不是ListView無濟於事，並決定再次使用ListView。 但我願意接受任何達到預期效果的解決方案，即使這意味着再次撕掉ListView。

任何你能給予的幫助將不勝感激。

對不起，如果我的問題格式不正確，我是新手:)

謝謝

Answer 1

更改

.list-view .scroll-bar:vertical {
   -fx-padding: 0px;
}

至

.list-view .scroll-bar:vertical {
    -fx-scale-x: 0;
}

如果你想在項目之間禁用移動：

listview.setMouseTransparent( true );
listview.setFocusTraversable( false );