Как указать процент ширины в JavaFX 2 с использованием FXML? - PullRequest
Новая
       23

Как указать процент ширины в JavaFX 2 с использованием FXML?

8 голосов
/ 23 марта 2012

Я ищу способ сказать, что размер maxWidth равен 80% в FXML.

Очень похоже на веб-разработку.

<VBox fx:id="testVB" prefWidth="600">

Но это не так:
<VBox fx:id="testVB" prefWidth="80%">

Я знаю, что в Straight JavaFX2 non-fxml вы можете создавать вставки? Каков наилучший способ сделать это вне кода в FMXL?

Спасибо!

Райли

Ответы [ 3 ]

23 голосов
/ 07 июля 2012

Я не уверен, что ты можешь.Вам необходимо использовать компонент макета GridPane.В этом компоненте вы можете указать ограничения для строк и столбцов, а в этих ограничениях вы можете указать ширину в процентах.Например: 

<GridPane>
    <children>
        <TitledPane text="testGridPane" GridPane.columnIndex="0" GridPane.rowIndex="0" />
    </children>
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    </rowConstraints>
</GridPane>

Этот код определяет GridPane с первым столбцом шириной 80%.TitledPane устанавливается в первой ячейке первого столбца этого GridPane и может (потому что вы должны быть уверены, что ограничения ширины TitledPane соответствуют вашим потребностям) занимает 80% шириныGridPane.

Обратите внимание, что я удалил всю информацию, не относящуюся к вашему вопросу.Кстати, инструмент Oracle Scene Builder очень полезен для определения сложной компоновки FXML.

9 голосов
/ 04 января 2017

Кажется, что многие ответы уже были предоставлены, и они должны работать. Однако , есть способ установить проценты: 

<fx:define>
    <Screen fx:factory="getPrimary" fx:id="screen" />
</fx:define>

Это поможет вам определить размеры текущего экрана, на котором отображается приложение. Теперь, когда у нас есть размеры экрана, мы можем поиграть с ним в FXML следующим образом: 

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox>

Обратите внимание, что я использую visualBounds , так как это даст мне доступное пространство на экране, так как я не хочу перекрытия с панелью задач в Windows, например. Для полноэкранных приложений вы просто должны использовать «границы».

Теперь, чтобы перейти к вашей точке использования процентов, вы можете поиграть со значениями prefheight и prefWidth. Вы можете поместить вычисления в $ {} .

По желанию:

Если вы хотите, чтобы все ваши элементы использовали относительные размеры, просто обратитесь к ним, используя их идентификатор и свойство width или height, и сделайте свой расчет. 

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox>

Надеюсь, это поможет!

0 голосов
/ 05 февраля 2015

Вы можете смоделировать это - основной пример, который имитирует 50% для двух столбцов в HBox.Вы можете добавить фиктивные панели, чтобы получить трети и т. Д. 

    HBox {
        VBox {
            static hgrow : "ALWAYS",
            Label {
                text : "Privacy",
                alignment : "CENTER",
                styleClass : ["h2", "heading"]
            }
        },
        VBox {
            static hgrow : "ALWAYS",
            Label {
                text : "Messages",
                alignment : "CENTER",
                styleClass : ["h2", "heading"]
            },
            Label {text:""}
        }
    }
...