百分比不起作用的 Gluon Mobile GridPane

Question

我有一个视图，中间有一个 GridPane，它填满了整个屏幕。 GridPane 在所有行和所有列上定义了百分比。在我的 Nexus 5X 上，布局正常。当我在 Android 4.4.3 的 Zebra 扫描仪 TC8000 上安装该应用程序时，未遵守百分比。相反，大约显示了上面的 50%，其余部分消失了，就像屏幕太小一样。

Zebra 上的分辨率当然要低得多，480x800 与 5X 上的 1080x1920，但我预计组件会根据 GridPane 的百分比缩小。有谁知道出了什么问题。

编辑：我尝试了很多不同的东西，我在 atm 上得到的最好的代码是下面的代码。这段代码存在的问题是： - 第一行占据屏幕高度的 55%，而不是配置的 30%。 - 组件离开屏幕的宽度约为 50 - 100 像素。如果这个问题解决了，布局就可以接受了。

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

<?import com.gluonhq.charm.glisten.mvc.View?>
<?import javafx.geometry.Insets?>
<?import javafx.geometry.Rectangle2D?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<View fx:id="product" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.essers.pxl2016.scan.application.gluon.views.ProductPresenter">
    <padding>
        <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
    </padding>
    <top>
        <HBox fx:id="buttonHBox" alignment="CENTER_LEFT" cacheShape="false" BorderPane.alignment="CENTER">
            <children>
                <Label fx:id="descriptionLabel">
                    <font>
                        <Font name="System Bold" size="15.0" />
                    </font>
                    <HBox.margin>
                        <Insets />
                    </HBox.margin>
                </Label>
                <Region HBox.hgrow="ALWAYS" />
                <Button fx:id="exitButton" mnemonicParsing="false" text="Exit">
                    <HBox.margin>
                        <Insets />
                    </HBox.margin>
                </Button>
            </children>
        </HBox>
    </top>
    <center>
        <GridPane>
            <columnConstraints>
                <ColumnConstraints fillWidth="false" percentWidth="100.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints percentHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints percentHeight="20.0" vgrow="SOMETIMES" />
                <RowConstraints percentHeight="50.0" vgrow="SOMETIMES" />
            </rowConstraints>
            <children>
                <GridPane hgap="4.0" vgap="4.0">
                    <columnConstraints>
                        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="15.0" />
                        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="15.0" />
                        <ColumnConstraints halignment="LEFT" hgrow="SOMETIMES" percentWidth="45.0" />
                        <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" percentWidth="25.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints percentHeight="7.5" vgrow="SOMETIMES" />
                        <RowConstraints percentHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints percentHeight="5.0" vgrow="SOMETIMES" />
                        <RowConstraints percentHeight="7.5" vgrow="SOMETIMES" />
                        <RowConstraints percentHeight="45.0" valignment="CENTER" vgrow="ALWAYS" />
                        <RowConstraints percentHeight="5.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                    <children>
                        <VBox alignment="CENTER" spacing="5.0" GridPane.rowIndex="4">
                            <children>
                                <Button fx:id="plusButton" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#plusClicked" text="+" textAlignment="CENTER" VBox.vgrow="ALWAYS">
                                    <VBox.margin>
                                        <Insets />
                                    </VBox.margin>
                                </Button>
                                <Button fx:id="minButton" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#minClicked" text="-" textAlignment="CENTER" VBox.vgrow="ALWAYS">
                                    <VBox.margin>
                                        <Insets />
                                    </VBox.margin>
                                </Button>
                            </children>
                            <GridPane.margin>
                                <Insets />
                            </GridPane.margin>
                        </VBox>
                        <Label text="Count" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label alignment="CENTER" contentDisplay="CENTER" nodeOrientation="LEFT_TO_RIGHT" text="Scanned barcode" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="3">
                            <font>
                                <Font size="11.0" />
                            </font>
                            <GridPane.margin>
                                <Insets left="5.0" />
                            </GridPane.margin>
                        </Label>
                        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#okClicked" text="OK" GridPane.columnIndex="3" GridPane.rowIndex="4">
                            <GridPane.margin>
                                <Insets />
                            </GridPane.margin>
                        </Button>
                        <Label text="Target">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label text="Scanned" GridPane.columnIndex="1">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label alignment="CENTER" text="Target barcode" GridPane.columnIndex="2">
                            <font>
                                <Font size="11.0" />
                            </font>
                            <padding>
                                <Insets left="5.0" />
                            </padding>
                        </Label>
                        <TextField fx:id="targetCountTextField" alignment="CENTER" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="5" GridPane.rowIndex="1" />
                        <TextField fx:id="countTextField" alignment="CENTER" maxHeight="1.7976931348623157E308" text="1" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="4" GridPane.rowSpan="2" GridPane.vgrow="ALWAYS" />
                        <TextField fx:id="targetBarcodeTextField" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" GridPane.columnIndex="2" GridPane.rowIndex="1">
                            <opaqueInsets>
                                <Insets left="5.0" />
                            </opaqueInsets>
                        </TextField>
                        <TextField fx:id="scannedCountTextField" alignment="CENTER" disable="true" editable="false" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                        <TextField fx:id="scannedBarcodeTextField" maxHeight="1.7976931348623157E308" onKeyPressed="#handleKeyPress" GridPane.columnIndex="2" GridPane.rowIndex="4" GridPane.rowSpan="2">
                            <opaqueInsets>
                                <Insets left="5.0" />
                            </opaqueInsets>
                        </TextField>
                        <Button fx:id="skipButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#skipClicked" text="Skip" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS" />
                    </children>
                </GridPane>
                <GridPane GridPane.rowIndex="1">
                    <columnConstraints>
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" percentWidth="29.0" prefWidth="0.0" />
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="31.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="15.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="25.0" prefWidth="100.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints vgrow="SOMETIMES" />
                        <RowConstraints vgrow="SOMETIMES" />
                        <RowConstraints vgrow="SOMETIMES" />
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                    <children>
                        <Label text="Id:" />
                        <Label text="Location:" GridPane.rowIndex="1" />
                        <Label text="Description:" GridPane.rowIndex="2" />
                        <Label text="Comment:" GridPane.rowIndex="3" />
                        <Label text="Status:" GridPane.columnIndex="2" GridPane.rowIndex="1" />
                        <Label text="Unit:" GridPane.columnIndex="2" />
                        <Label fx:id="idLabel" GridPane.columnIndex="1" />
                        <Label fx:id="locationLabel" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                        <Label fx:id="longDescriptionLabel" wrapText="true" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="2" />
                        <Label fx:id="commentLabel" wrapText="true" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="3" />
                        <Label fx:id="statusLabel" GridPane.columnIndex="3" GridPane.rowIndex="1" />
                        <Label fx:id="unitLabel" GridPane.columnIndex="3" />
                    </children>
                </GridPane>
                <VBox GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                    <children>
                        <Pane fx:id="pane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
                            <children>
                                <StackPane fx:id="imagePane" alignment="TOP_LEFT" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
                                    <children>
                                        <ImageView fx:id="imageView" onMouseClicked="#imageClicked" pickOnBounds="true" preserveRatio="true" StackPane.alignment="CENTER">
                                            <viewport>
                                                <Rectangle2D />
                                            </viewport>
                                        </ImageView>
                                        <Button fx:id="videoButton" disable="true" mnemonicParsing="false" onAction="#videoButtonClicked" text="Video" visible="false" StackPane.alignment="TOP_RIGHT">
                                            <StackPane.margin>
                                                <Insets right="3.0" top="3.0" />
                                            </StackPane.margin>
                                        </Button>
                                    </children>
                                </StackPane>
                            </children>
                        </Pane>
                        <Label fx:id="figLabel" alignment="TOP_LEFT" />
                    </children>
                </VBox>
            </children>
        </GridPane>
    </center>
</View>

Answer 1

如果您运行在桌面上使用您的应用并将舞台尺寸设置为 320x600，则可以重现该问题：

@Override
public void postInit(Scene scene) {
    scene.getWindow().setWidth(320);
    scene.getWindow().setHeight(600);
}

使用 ScenicView 您会注意到视图的宽度为 370 像素，因为顶部内部网格的最小宽度为 360 像素。

虽然您没有为任何控件设置任何最小值，但您可以看到样式按钮没有正确调整大小，因为最小宽度由 css 设置。

尝试添加这个以删除它们的最小宽度值：

.view {
}

.button {
    -fx-min-width: 10;
}

现在视图应该在移动屏幕的范围内：

Answer 2

问题是我把一个按钮放在了一个小宽度的列中。在 SceneBuilder 和宽度高分辨率的设备上，布局看起来不错，但在小屏幕上显示时，按钮对于列来说变得太宽了。作为响应，View 被调整为更大的最大宽度，并且由于宽度已经填满了屏幕，它现在超出了屏幕。

我认为应该调整按钮的大小或按比例缩小以适合 GridPane 单元格。此外，计算中使用的按钮的最小尺寸非常宽，即使我的按钮只有一个加号。

百分比不起作用的 Gluon Mobile GridPane

Gluon Mobile GridPane with percentages not working

mobile

javafx

gridpane

gluon