在JavaFX的ListView中隐藏垂直滚动条。

Question

在JavaFX的ListView中隐藏垂直滚动条。

7

我已经尝试了几个小时，但似乎无法在任何地方找到答案。我有两个问题与同一个列表视图相关，其中一个更为严重。

我正在尝试匹配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 ListView，其中滚动条放置在内容上方，当滚动时，拇指是半透明的，不滚动时则不可见。如果能实现这一点最好，虽然没有滚动条，红线条位于末端也是可以接受的。

我已经尝试过使用ScrollPane和标准AnchorPane替代ListView，但没有成功，因此决定再次尝试ListView。但是，如果需要实现期望的结果，即使这意味着重构ListView，我也愿意采用任何解决方案。

如果您能提供任何帮助，我将不胜感激。

抱歉，如果我的问题格式不正确，因为我是新手 :)

谢谢

- Daniel

你可以把内容放到一个位于 Scrollpane 内部的 VBox 中，这样你就可以设置滚动条策略来保持它们可见或不可见。 - Alexiy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RAUL · Accepted Answer

更改

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

to

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

如果您想禁用项目之间的移动：

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