无法样式化 hbox 或 vbox。

huangapple go评论70阅读模式
英文:

Cannot style hbox or vbox

问题

以下是您要翻译的内容:

"Quite frustrating as I follow guidelines and basic tutorial. I can apply CSS styles to different elements but not to vbox or hbox.

I have the following simple Apps creating a simple scene using a FMXL and CSS:

import java.net.URL;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;

public class BingRen extends Application {
	@Override
	public void start(Stage primaryStage) {
    	Parent root = null;
    	FXMLLoader loader = new FXMLLoader();
    	URL xmlUrl = getClass().getResource("/BingRen.fxml");
    	loader.setLocation(xmlUrl);
		try {
			root = loader.load();
			Scene scene = new Scene(root,400,400);
			scene.getStylesheets().add(getClass().getResource("BingRen.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

With FXML, creating just a BordPane and 2 HBox containing one label each. Almost as simple as HellopApp :

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>

<BorderPane fx:id="rootBorderPane"
		xmlns="http://javafx.com/javafx"
		xmlns:fx="http://javafx.com/fxml"
		fx:controller="MainControler">
	<top>
		<HBox>
			<Label text="BingRen app" />
		</HBox>
	</top>
	<bottom>
		<HBox>
			<Label text="Status bar" />
		</HBox>
	</bottom>
	<center>
	</center>
</BorderPane>

And CSS to set some basic properties:

.hbox {
	-fx-background-color: #00ff00;
    -fx-border-color: #00ff00;
    -fx-border-width: 2px;
    -fx-padding: 10;
    -fx-spacing: 8;
}

.label {
    -fx-text-fill: #0000ff;
}

Label properly turns blue but none of the hbox styles are applied.


In fact, none of the suggestions worked.

I tried:

  • Change .hbox to .Hbox in CSS file
  • Make a #allbox in CSS file and add fx-id="allbox" in the FXML file

For every change, I changed the color for the label to ensure the new version of CSS is read through.

Label always changes color, but I never get background or paddings in the Hboxes."

英文:

Quite frustrating as I follow guidelines and basic tutorial. I can apply CSS styles to differnt elements but not to vbox or hbox.

I have the following simple Apps creating a simple scene using a FMXL and CSS:

import java.net.URL;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;


public class BingRen extends Application {
	@Override
	public void start(Stage primaryStage) {
    	Parent root = null;
    	FXMLLoader loader = new FXMLLoader();
    	URL xmlUrl = getClass().getResource("/BingRen.fxml");
    	loader.setLocation(xmlUrl);
		try {
			root = loader.load();
			Scene scene = new Scene(root,400,400);
			scene.getStylesheets().add(getClass().getResource("BingRen.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

With FXML, creating just a BordPane and 2 HBox containing one label each. Almost as simple as HellopApp :

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>


<BorderPane fx:id="rootBorderPane"
		xmlns="http://javafx.com/javafx"
		xmlns:fx="http://javafx.com/fxml"
		fx:controller="MainControler">
	<top>
		<HBox>
			<Label text="BingRen app" />
		</HBox>
	</top>
	<bottom>
		<HBox>
			<Label text="Status bar" />
		</HBox>
	</bottom>
	<center>
	</center>
</BorderPane>

And CSS to set some basic properties:

.hbox {
	-fx-background-color: #00ff00;
    -fx-border-color: #00ff00;
    -fx-border-width: 2px;
    -fx-padding: 10;
    -fx-spacing: 8;
}

.label {
    -fx-text-fill: #0000ff;
}

Label properly turn blue but not of the hbox style are applied


In fact none of the suggestion worked.

I tried :

  • Change .hbox to .Hbox in css file
  • Make a #allbox in css file and add fx-id="allbox" and fxml file

For every change, I change the color for label to ensure the new version of css is read through.

Label always change color but I never get backgroung or paddings in the Hboxes

答案1

得分: 6

为什么你当前的方法失败

查看CSS文档

对于HBox

> 样式类:默认为空

对于Label

> 样式类:label

因此,对于HBox,除非添加一个样式类(而你没有添加),否则不存在类似“.hbox”的样式类。

CSS选择器和JavaFX的背景

阅读标题为“CSS和JavaFX场景图” 的部分(链接):

> CSS选择器用于将样式匹配到场景图节点。节点与CSS选择器的关系如下:
>
> * Node的getTypeSelector方法返回一个字符串,类似于CSS Type Selector。默认情况下,此方法返回类的简单名称。请注意,内部类或匿名类的简单名称可能无法用作类型选择器。在这种情况下,应重写此方法以返回有意义的值。
> * 场景图中的每个节点都有一个styleClass属性。请注意,节点可能有多个样式类。Node的styleClass类似于出现在HTML元素上的class="..."属性。请参阅Class Selectors。
> * 场景图中的每个节点都有一个id变量,一个字符串。这类似于出现在HTML元素上的id="..."属性。请参阅ID Selectors。

应用示例

因此,有三种方法可以解决此问题:

  1. 在CSS文件中使用类型选择器

    HBox { <css规则> }
    
  2. 在CSS文件中应用样式类

    .my-hbox-styleclass { <css规则> }
    

    并在FXML中写:

    <HBox styleClass="my-hbox-styleclass">
    

    或在代码中写:

    myHBox.getStyleClass().add("my-hbox-styleclass");
    
  3. 在CSS文件中应用样式ID

    #my-hbox-id { <css规则> }
    

    并在FXML中写:

    <HBox id="my-hbox-id">
    

    或在代码中写:

    myHBox.setId("my-hbox-id");
    

选择器范围差异

对于每种方法的标准应用,存在以下差异:

  1. 类型选择器将应用于UI中的所有HBox类型。
  2. 样式类选择器将应用于具有给定样式类的任何内容。
  3. ID选择器通常用于UI中的单个节点,而不是节点的类型或类。在FXML文档或场景图树中应该是唯一的,尽管这并不是强制执行的。
英文:

Why your current approach fails

Look at the CSS documentation.

For HBox

> Style class: empty by default

For Label

> Style class: label

So there is no such style class as ".hbox" for a HBox unless you add one, which you have not done.

Background on CSS selectors and JavaFX

Read the section titled "CSS and the JavaFX Scene Graph":

> CSS selectors are used to match styles to scene‑graph nodes. The
> relationship of a Node to a CSS selector is as follows:
>
> * Node's getTypeSelector method returns a String which is analogous to a
> CSS Type Selector. By default, this method returns the simple name of
> the class. Note that the simple name of an inner class or of an
> anonymous class may not be usable as a type selector. In such a case,
> this method should be overridden to return a meaningful value.
> * Each
> node in the scene‑graph has a styleClass property. Note that a node
> may have more than one style‑class. A Node's styleClass is analogous
> to the class="..." attribute that can appear on HTML elements. See
> Class Selectors.
> * Each node in the scene‑graph has an id variable, a
> string. This is analogous to the id="..." attribute that can appear
> HTML elements. See ID Selectors.

Application examples

So there are three ways you can fix this:

  1. Use a type selector in your CSS file:

    HBox { &lt;css rules&gt; }
    
  2. Apply a style class in your CSS file:

    .my-hbox-styleclass { &lt;css rules&gt; }
    

    And in FXML write:

    &lt;HBox styleClass=&quot;my-hbox-styleclass&quot;&gt;
    

    OR in code write:

    myHBox.getStyleClass().add(&quot;my-hbox-styleclass&quot;);
    
  3. Apply a style id in your CSS file:

    #my-hbox-id { &lt;css rules&gt; }
    

    And in FXML write:

    &lt;HBox id=&quot;my-hbox-id&quot;&gt;
    

    OR in code write:

    myHBox.setId(&quot;my-hbox-id&quot;);
    

Selector scope differences

There are differences in the meaning for the standard application of each approach:

  1. The type selector will apply to all HBox types in your UI.
  2. The class selector will apply to anything which has the given style class applied.
  3. The id selector is usually used for a single node in the UI, rather than a type or class of node. It should be unique within an FXML document or scene graph tree, though this is not enforced.

huangapple
  • 本文由 发表于 2023年5月15日 12:56:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76250960.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定