Question

尝试通过添加CSS文件来自定义浮动TabPane，就像下面的示例一样。新样式不会仅针对浮动tabpane显示 - 对于常规窗格，样式将按预期显示。

public class FloatingTabPaneTest extends Application
{
  public static void main(String[] args)
  {
    Application.launch(args);
  }

  @Override
  public void start(Stage stage)
  {
    Parent root = createContentPane();
    root.getStylesheets().add(getClass().getResource("/floatingTabPane.css").toExternalForm());        
    Scene scene = new Scene(root, 1000, 800);    
    stage.setScene(scene);

    stage.setTitle(getClass().getSimpleName());
    stage.show();
  }

  private Parent createContentPane()
  {
    TabPane tabPane = new TabPane();
    tabPane.getStyleClass().add(TabPane.STYLE_CLASS_FLOATING);

    addTab(tabPane, "Tab 1", new StackPane());
    addTab(tabPane, "Tab 2", new StackPane());
    addTab(tabPane, "Tab 3", new StackPane());
    tabPane.getSelectionModel().selectLast();

    return new BorderPane(tabPane);
  }

  private void addTab(TabPane tabPane, String name, Node content)
  {
    Tab tab = new Tab();
    tab.setText(name);
    tab.setContent(content);
    tabPane.getTabs().add(tab);    
  }  
}

FloatingTabPane.css：

    .tab-pane.floating > .tab-header-area > .tab-header-background {
    -fx-border-color: red;
    -fx-border-width: 2;
    -fx-background-color: cyan;
}

Answer 1

这非常有趣。问题是，如果您使用headerBackground样式类，则false可见性设置为FLOATING。

如果您在reference内搜索，您会发现：

if (isFloatingStyleClass()) {
     headerBackground.setVisible(false); // <---- Imp part
} else {
     headerBackground.resize(snapSize(getWidth()), snapSize(getHeight()));
     headerBackground.setVisible(true);
}

由于其可见性设置为false，因此您最好的选择是在tab-header-area而不是tab-header-background上进行更改

.tab-pane.floating > .tab-header-area {
    -fx-border-color: red;
    -fx-border-width: 2;
    -fx-background-color: cyan;
}

这会在标签上留下一条细红线，但这比完全没有风格要好;）

浮动TabPane的样式不会出现

1 个答案: