2017-04-05 191 views
1

我拥有此项: enter image description here 带有左侧节点的borderPane带有内部按钮(橙色箭头)的Vbox(绿色箭头)。JavaFx元素,根据窗口大小动态更改大小

我不能做的是找到一种方法来改变Vbox(绿色部分)的尺寸,然后根据窗口的大小按钮(橙色部分)。 (当用户玩的窗口大小)

我更喜欢找到一种方法来设置参数到我的CSS文件,或作为我的fxml内最后的手段。

.css文件:

.left-borderPane{ /*this is style class for Vbox */ 
/*something so similar: */ 
-fx-min-width:30% ; 
-fx-max-width:30% ; 
} 

.icon-settings{/*this is style class for buttons*/ 
-fx-shape:"M72.5,65.9 M90,50c0,8.6-2.5,16.9-7.3,24.1c-0.4,0.6-1,0.9-1.7,0.9c-0.4,0-0.8-0.1-1.1-0.3c-0.9-0.6-1.2-1.8-0.6-2.50zM69.6,50c0,3.2-0.6,6.2-1.8,9.1c-0.3,0.8-1.1,1.2-1.8,1.2c-0.2,0-0.5,0-0.8-0.1c-1-0.4c0.6-0.6,1.4-0.7,2.2-0.4C57.5,14.5,58,15.2,58,16z M35,37H14v26h21V37z M54,20.8l-15,15v28.3l15,15V20.8z"; 
/*something so similar: */ 
-fx-min-width:80% ; 
-fx-max-width:80% ; 
    } 

回答

2

浆纱用GridPane percentWidth/percentHeight列和行限制

你提到,你想做到这一点在CSS或FXML。 JavaFX中的CSS不会这样做,它主要用于样式而不是布局。 FXML旨在完成大部分布局工作(最好与Gluon SceneBuilder配合使用)。

这是试图用FXML设计你的布局。使用的主容器是一个GridPane。要根据可用区域的百分比设置网格窗格区域的大小,ColumnConstraintsRowConstraintspercentWidthpercentHeight一起使用。封闭控件(在本例中为按钮)的min/max/pref大小被设置,以便它们将填充可用区域。

dynamiclayout

<?import javafx.scene.control.Button?> 
<?import javafx.scene.layout.ColumnConstraints?> 
<?import javafx.scene.layout.GridPane?> 
<?import javafx.scene.layout.RowConstraints?> 

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" 
      prefWidth="300.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.65"> 
    <columnConstraints> 
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/> 
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="30.0"/> 
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/> 
    <ColumnConstraints hgrow="SOMETIMES"/> 
    </columnConstraints> 
    <rowConstraints> 
    <RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/> 
    <RowConstraints vgrow="SOMETIMES"/> 
    <RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/> 
    </rowConstraints> 
    <children> 
    <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" 
      mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.halignment="CENTER" 
      GridPane.rowIndex="1" GridPane.valignment="CENTER"/> 
    </children> 
</GridPane> 

从其他类似的问题

还有一堆的方式来动态改变元件尺寸,其中一些在下面的帖子中讨论的信息。可能值得回顾一下不同的技术,以确定哪种技术最适合您的情况。

1

不像在网络,即HTML + CSS,JavaFX的+ CSS做做定位,并从CSS大小。您必须将左侧面板的大小与窗口大小(通过最可能的简单计算)以及按钮的大小绑定到面板的大小(再次通过简单的计算)。下面的代码演示的原则:

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

public class BoundSizes extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     BorderPane borderPane = new BorderPane(); 
     VBox vbox = new VBox(); 
     Button b = new Button("THE BUTTON"); 
     vbox.getChildren().add(b); 
     borderPane.setLeft(vbox); 

     // the VBox stays e.g. 1/3 of the window width 
     vbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 3.0)); 
     // painting it to be obvious 
     vbox.setStyle("-fx-background-color: black"); 

     // the button stays e.g. at half the width of the VBox 
     b.prefWidthProperty().bind(Bindings.divide(vbox.widthProperty(), 2.0)); 

     Scene scene = new Scene(borderPane, 300, 275); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String arg[]) { 
     launch(arg); 
    } 
} 
相关问题