Question

我的GridPane包含单个视频的数据，其中ImageView包含columnSpan="3"。当窗口大小发生变化时，我想让视频图像完全适合整个第一行。有什么想法吗？

这是我到目前为止所得到的：

代码：

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

<?import javafx.scene.control.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<GridPane fx:id="videoGP" alignment="CENTER" gridLinesVisible="true" prefHeight="315.0" prefWidth="405.0" GridPane.columnIndex="1" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <columnConstraints>
        <ColumnConstraints fillWidth="false" halignment="CENTER" hgrow="ALWAYS" maxWidth="30.0" minWidth="10.0" prefWidth="20.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="40.0" minWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints maxHeight="1000.0" minHeight="10.0" percentHeight="80.0" prefHeight="94.0" valignment="CENTER" vgrow="ALWAYS" />
        <RowConstraints maxHeight="37.0" minHeight="0.0" percentHeight="10.0" prefHeight="17.0" vgrow="SOMETIMES" />
        <RowConstraints maxHeight="31.0" minHeight="10.0" percentHeight="10.0" prefHeight="20.0" vgrow="SOMETIMES" />
    </rowConstraints>
    <children>
        <ImageView fx:id="videoImage" fitHeight="181.0" fitWidth="364.0" pickOnBounds="true" preserveRatio="true" GridPane.columnSpan="3" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS" StackPane.alignment="CENTER">
            <image>
                <Image url="@../ItTakesTimeToBecomeYoung.jpg" />
            </image>
            <GridPane.margin>
                <Insets />
            </GridPane.margin>
        </ImageView>
        <ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#clickInfo" pickOnBounds="true" preserveRatio="true" GridPane.rowIndex="1" GridPane.rowSpan="2">
            <image>
                <Image url="@../Views/Icons/bn_info_normal.png" />
            </image>
            <GridPane.margin>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </GridPane.margin>
        </ImageView>
        <Label fx:id="videoName" text="Video Name" GridPane.columnIndex="1" GridPane.rowIndex="1">
            <font>
                <Font name="System Bold Italic" size="12.0" />
            </font>
            <padding>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </padding>
        </Label>
        <Label fx:id="artistName" text="Artist Name" GridPane.columnIndex="1" GridPane.rowIndex="2">
            <padding>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </padding>
        </Label>
        <Label fx:id="videoDuration" alignment="CENTER_RIGHT" prefHeight="13.0" prefWidth="124.0" text="3:49" GridPane.columnIndex="2" GridPane.rowIndex="1">
            <padding>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </padding>
        </Label>
        <ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#clickPlay" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
            <image>
                <Image url="@../Views/Icons/ic_play.png" />
            </image>
        </ImageView>
    </children>
</GridPane>

Answer 1

ImageView无法调整大小，但您可以使用可调整大小的父级，并使用expression binding将fitWidth和fitHeight属性绑定到父级的大小：

以下示例只是一个StackPane，可以用作场景的根来观察调整Stage大小时的行为，但如果StackPane是Parent，则会产生相同的效果已调整为GridPane，例如<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.image.*?> <?import javafx.scene.layout.*?> <StackPane fx:id="root" xmlns:fx="http://javafx.com/fxml/1"> <children> <ImageView fitWidth="${root.width}" fitHeight="${root.height}" preserveRatio="true">  <image> <Image url="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"/> </image> </ImageView> </children> </StackPane>：

var
   Btn : TButton;
begin
   Btn := TButton.Create(Self);
   Btn.Caption := 'ButtonA';
   Btn.Align := alLeft;
   Btn.Parent := Self;

   Btn := TButton.Create(Self);
   Btn.Caption := 'ButtonB';
   Btn.Align := alLeft;
   Btn.Parent := Self;
end;

如何使图像适合columnSpan上网格面板的大小

1 个答案: