2016-09-29 89 views
2

我已经尝试了好几个小时了,现在似乎无法在任何地方找到答案。我有两个与同一个listview有关的问题,其中一个比另一个严重。在javafx中隐藏垂直滚动列表视图

我想匹配在java中提供给我的设计。列表视图应该看起来像下面的

This is from the design

目前我已经得到尽可能

My current endeavour

我创建了一个自定义的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。

任何帮助,你可以给予赞赏。

对不起,如果格式不正确我的问题我是个新手:)

感谢

+0

把你的内容放到Scrollpane里面的VBox里面怎么样?然后,您可以设置滚动条策略以使其可见或不可见。 – Alexiy

回答

4

变化

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

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

如果你想禁用之间移动物品:

listview.setMouseTransparent(true); 
listview.setFocusTraversable(false); 
相关问题