字体大小不适用于列表图块中的主要文本

时间：2018-10-02 08:30:45

标签： gluon gluon-mobile

最近我正在学习gluon mobile，发现javafx css具有有线功能。

按照教程“ Comments”的内容，我创建了一个名为“ CommentsView”的视图，当 我试图更改注释列表图块中主要文本和次要文本的字体大小，这不会产生任何效果。

您能解释一下为什么列表磁贴中的文本的-fx-font-size不能按预期运行吗？非常感谢你。

这是我的代码：

// CommentsPresenter.java
import com.freedom.demo.Comments;
import com.freedom.demo.model.Comment;
import com.gluonhq.charm.glisten.application.MobileApplication;
import com.gluonhq.charm.glisten.control.AppBar;
import com.gluonhq.charm.glisten.control.FloatingActionButton;
import com.gluonhq.charm.glisten.mvc.View;
import com.gluonhq.charm.glisten.visual.MaterialDesignIcon;
import com.gluonhq.charm.glisten.visual.Swatch;
import com.google.common.base.Joiner;
import javafx.fxml.FXML;
import javafx.scene.control.*;

import java.util.logging.Level;
import java.util.logging.Logger;

public class CommentsPresenter {
    private static final Logger logger = Logger.getLogger(CommentsPresenter.class.getName());

    @FXML
    private View comments;

    @FXML
    private ListView commentView;

    public void initialize() {
        comments.showingProperty().addListener((obs, oldValue, newValue) -> {
            if (newValue) {
                AppBar appBar = MobileApplication.getInstance().getAppBar();
                appBar.setNavIcon(MaterialDesignIcon.MENU.button(e ->
                        MobileApplication.getInstance().getDrawer().open()));
                appBar.setTitleText("Comments");

                Swatch.ORANGE.assignTo(comments.getScene());
            }
        });
        final FloatingActionButton floatingActionButton = new FloatingActionButton(MaterialDesignIcon.ADD.text,
                e -> MobileApplication.getInstance().switchView(Comments.EDITION_VIEW));
        floatingActionButton.showOn(comments);

        commentView.setCellFactory(p -> new CommentListCell());
        commentView.setPlaceholder(new Label("There are no comments"));
        commentView.getItems().add(new Comment("wtx", "hello world!中国"));
    }

    @FXML
    void buttonClick() {
    }

}
// CommentListCell.java
import com.freedom.demo.model.Comment;
import com.gluonhq.charm.glisten.control.ListTile;
import com.gluonhq.charm.glisten.visual.MaterialDesignIcon;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.layout.VBox;

import java.util.logging.Level;
import java.util.logging.Logger;

public class CommentListCell extends ListCell<Comment>{
    private final static Logger logger = Logger.getLogger(CommentListCell.class.getName());

    private final ListTile tile = new ListTile();

    private Comment comment;
    {
        tile.getStyleClass().add("comment-list");
    }

    {
        final Button button = MaterialDesignIcon.DELETE.button();
        tile.setSecondaryGraphic(new VBox(button));
    }

    @Override
    protected void updateItem(Comment item, boolean empty) {
        super.updateItem(item, empty);
        comment = item;
        if (!empty && item != null) {
            tile.textProperty().setAll(item.getAuthor(), item.getContent(), item.getDateStr());
            setGraphic(tile);
        } else {
            setGraphic(null);
        }
    }
}

这是我的CSS和html：

.view {
}
.comment-list {
    -fx-background-color: -primary-swatch-50;
    -fx-text-fill: -primary-swatch-700;
    -fx-padding: 0 0 10 0;
}
.comment-list .primary-text {
    -fx-font-size: 30;
    -fx-padding: 10 0 10 0;
    -fx-text-fill: -primary-swatch-900;
    -fx-background-color: green;
}
.comment-list .secondary-text{
    -fx-font-size: 20;
    -fx-background-color: red;
}
.button.icon-toggle {
    -fx-text-fill: -primary-swatch-900;
}

<?xml version="1.0" encoding="UTF-8"?>

<?import com.gluonhq.charm.glisten.mvc.View?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.BorderPane?>

<View fx:id="comments" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="350.0" stylesheets="@comments.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.freedom.demo.views.CommentsPresenter">
   <center>
      <ListView fx:id="commentView" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
</View>

在吃完 iphone5S 模拟器后，视图显示为正在流动： enter image description here

ps：这是我的依赖树：

+--- com.gluonhq:charm:5.0.0
|    +--- com.gluonhq:connect:1.4.4
|    |    \--- org.glassfish:javax.json:1.0.4
|    +--- com.gluonhq:charm-cloudlink-client:4.4.7
|    |    +--- com.gluonhq:connect:1.4.4 (*)
|    |    +--- com.gluonhq:charm-down-plugin-device:3.6.0
|    |    |    \--- com.gluonhq:charm-down-core:3.6.0 -> 3.8.0
|    |    +--- com.gluonhq:charm-down-plugin-in-app-billing:3.6.0
|    |    |    \--- com.gluonhq:charm-down-core:3.6.0 -> 3.8.0
|    |    +--- com.gluonhq:charm-down-plugin-push-notifications:3.6.0
|    |    |    +--- com.gluonhq:charm-down-core:3.6.0 -> 3.8.0
|    |    |    \--- com.gluonhq:charm-down-plugin-runtime-args:3.6.0
|    |    |         \--- com.gluonhq:charm-down-core:3.6.0 -> 3.8.0
|    |    \--- com.gluonhq:charm-down-plugin-storage:3.6.0 -> 3.8.0
|    |         \--- com.gluonhq:charm-down-core:3.8.0
|    +--- com.gluonhq:charm-glisten-connect-view:5.0.0
|    |    +--- com.gluonhq:charm-cloudlink-client:4.4.7 (*)
|    |    \--- com.gluonhq:charm-glisten:5.0.0
|    |         +--- com.gluonhq:charm-down-plugin-display:3.8.0
|    |         |    \--- com.gluonhq:charm-down-core:3.8.0
|    |         +--- com.gluonhq:charm-down-plugin-lifecycle:3.8.0
|    |         |    \--- com.gluonhq:charm-down-core:3.8.0
|    |         +--- com.gluonhq:charm-down-plugin-statusbar:3.8.0
|    |         |    \--- com.gluonhq:charm-down-core:3.8.0
|    |         \--- com.gluonhq:charm-down-plugin-storage:3.8.0 (*)
|    \--- com.gluonhq:charm-glisten:5.0.0 (*)
+--- com.google.guava:guava:26.0 FAILED
+--- com.gluonhq:charm-down-plugin-display:3.8.0 (*)
+--- com.gluonhq:charm-down-plugin-lifecycle:3.8.0 (*)
+--- com.gluonhq:charm-down-plugin-statusbar:3.8.0 (*)
+--- com.gluonhq:charm-down-plugin-storage:3.8.0 (*)
\--- com.gluonhq:robovm-cocoatouch:2.3.1-ios11
     \--- com.gluonhq:robovm-objc:2.3.1-ios11

1 个答案:

答案 0 :(得分：1)

在手机上进行测试之前能够在桌面上运行的优点之一是，您可以使用Scenic View来检查类似您预先发布的问题。

如果您运行应用程序并启动Scenic View，则会看到：

ScenicView

请注意，ListTile控件具有样式类型为VBox的{​​{1}}，它用作标签text-box，primary-text的容器。 / p>

因此，您需要在CSS中添加的就是这种关系：

secondary-text

现在您可以再次测试您的应用了：

相关问题
最新问题