Question

我创建了一个扩展var path= window.location.pathname; // lets imaging that url is "/home/x" var pathArray = path.split( '/' ); var loc= pathArray[1];//number of part of url that is changing, here it rerurns x injectTapEventPlugin(); export default ({ children }) => ( <MuiThemeProvider muiTheme={muiTheme}> <div className="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> {loc!=="signin" && path!=="/"?(<DashboardHeader/>):null} {loc!=="signin" && path!=="/"?(<SideBar/>):null} {children} </div> </MuiThemeProvider> );

的自定义控件

FXML

HBox:

Java文件

<fx:root alignment="CENTER_LEFT" prefHeight="80" prefWidth="400.0" spacing="5" styleClass="email-view"
         stylesheets="stylesheet.css" type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx/8.0.112"
         xmlns:fx="http://javafx.com/fxml/1">
    <Region fx:id="unreadIndicator" prefWidth="5.0"/>
    <Label fx:id="senderAvatar" prefHeight="40.0" prefWidth="40.0" styleClass="sender-image-small"/>
    <Region prefWidth="10"/>
    <VBox prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS">
        <Region prefHeight="10"/>
        <HBox>
            <Label fx:id="fromLabel" styleClass="from-label">Anindya Chatterjee</Label>
            <Region HBox.hgrow="ALWAYS"/>
            <Label fx:id="dateLabel" styleClass="date-label">31st Dec 1999</Label>
            <Region prefWidth="5"/>
        </HBox>
        <Region prefHeight="5"/>
        <HBox>
            <Label fx:id="subjectLabel" styleClass="subject-label">Test Mail Subject</Label>
            <Region HBox.hgrow="ALWAYS"/>
            <ImageView fx:id="attachmentLabel" styleClass="attachment-label">
                <Image requestedHeight="15" requestedWidth="15" url="@attach.svg"/>
            </ImageView>
            <Region prefWidth="5"/>
        </HBox>
        <Region prefHeight="5"/>
        <HBox>
            <Label fx:id="contentLabel" styleClass="content-label" maxWidth="400">
                Here is some text for test mail just to check how does
                it look on mock ups. The final value will change
            </Label>
            <Region HBox.hgrow="ALWAYS"/>
            <ImageView fx:id="favoriteLabel" styleClass="favorite-label">
                <Image requestedHeight="15" requestedWidth="15" url="@favorite.svg"/>
            </ImageView>
            <Region minWidth="5"/>
        </HBox>
    </VBox>
</fx:root>

我将控件用作列表视图项。我已经对css属性进行了更改以更改选择栏颜色，所有内容如下所示

public class EmailView extends HBox {

    public Region unreadIndicator;
    public Label senderAvatar;
    public Label fromLabel;
    public Label dateLabel;
    public Label subjectLabel;
    public ImageView attachmentLabel;
    public Label contentLabel;
    public ImageView favoriteLabel;

    public EmailView() {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(getClass().getClassLoader().getResource("email-view.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }
}

现在我想在列表视图中选择时更改自定义控件的背景颜色。我试图或多或少地达到这样的效果

任何指针如何使用css优化实现此效果？

Answer 1

从理论上讲，这组选择器可以解决这个问题：

// Color of the list-cell selected + unselected: transparent
.list-view .list-cell,
.list-view .list-cell:filled,
.list-view .list-cell:selected,
.list-view .list-cell:focused,
 .list-view .list-cell:hover {
    -fx-background-color: transparent;
    -fx-effect: null;
}

// Color of the custom control hover
.list-view .list-cell:hover .email-view {
    -fx-background-color: greenyellow;
}

// Color of the custom control selected
.list-view .list-cell:filled:selected:focused .email-view,
.list-view .list-cell:filled:selected .email-view {
    -fx-background-color: green;
}

// Color of the custom control unselected
.email-view { -fx-background-color: gray; }

目标是始终保持list-cell透明，并根据list-cell的伪状态设置email-view的背景颜色。也许我忘记了某个州，但这可能是一个很好的起点。

如何在JavaFX中的ListView中设置自定义控件的样式

1 个答案: