如何正确地将自定义按钮集转换为响应对象？

Posted

技术标签:

【中文标题】如何正确地将自定义按钮集转换为响应对象？【英文标题】：How to properly turn custom button set into a responsive object? 【发布时间】：2021-09-23 12:15:12 【问题描述】：

简介

我正在学习如何使用 JavaFX 11 为未来的项目做响应式 UI，并且对设计响应式布局产生了疑问。

问题

Custom Layout

我已经构建了这个包含两个标签和一个按钮的自定义布局，层次结构是：

Custom Layout Hierarchy

当我将应用程序设置为全屏时，它会变成不需要的结果。自定义布局内的标签和按钮保持固定，在全屏模式下不会随着大小调整而移动。

Fullscreen unwanted result

显示为红色，有一个不想要的空白区域，我希望将项目移入其中。

我该怎么做才能使里面的项目相应地翻译以调整大小？

访问的来源

how to make resposive design - *** using anchor for resize - *** GUI garage - Blog for JavaFX

FXML

<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="750.0" prefWidth="880.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.GUI.controller.BioJavaController">
   <children>
      <MenuBar>
        <menus>
          <Menu mnemonicParsing="false" text="File">
            <items>
              <MenuItem mnemonicParsing="false" text="Close" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Edit">
            <items>
              <MenuItem mnemonicParsing="false" text="Delete" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Help">
            <items>
              <MenuItem mnemonicParsing="false" text="About" />
            </items>
          </Menu>
        </menus>
      </MenuBar>
      <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="728.0" prefWidth="883.0">
         <items>
            <AnchorPane prefHeight="200.0" prefWidth="200.0">
               <children>
                  <LineChart fx:id="LineChart" prefHeight="358.0" prefWidth="878.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                    <xAxis>
                      <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </LineChart>
               </children>
            </AnchorPane>
            <SplitPane dividerPositions="0.5" prefHeight="333.0" prefWidth="878.0">
              <items>
                <AnchorPane fx:id="measurePanel" minHeight="0.0" minWidth="0.0" prefHeight="436.0" prefWidth="349.0">
                     <children>
                        <ToolBar fx:id="ToolPoint_1" prefHeight="40.0" prefWidth="393.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="-1.0">
                           <items>
                              <AnchorPane prefHeight="40.0" prefWidth="393.0">
                                 <children>
                                    <Button fx:id="measureBtn_1" layoutX="317.0" layoutY="2.0" mnemonicParsing="false" onMouseClicked="#onMeasureClick" text="Count" AnchorPane.leftAnchor="317.0" />
                                    <Label layoutY="9.0" text="Counter" AnchorPane.leftAnchor="0.0" />
                                    <Label layoutX="132.0" layoutY="9.0" prefHeight="17.0" prefWidth="261.0" text="Number: 0" AnchorPane.leftAnchor="132.0" />
                                 </children>
                              </AnchorPane>
                           </items>
                        </ToolBar>
                        <ToolBar fx:id="ToolPoint_11" layoutY="50.0" prefHeight="50.0" prefWidth="436.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                           <items>
                              <AnchorPane prefHeight="40.0" prefWidth="393.0">
                                 <children>
                                    <Button fx:id="measureBtn_11" layoutX="317.0" layoutY="2.0" mnemonicParsing="false" onMouseClicked="#onMeasureClick" text="Count" AnchorPane.leftAnchor="317.0" />
                                    <Label layoutY="9.0" text="Counter" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
                                    <Label layoutX="132.0" layoutY="9.0" prefHeight="17.0" prefWidth="261.0" text="Number: 0" AnchorPane.leftAnchor="132.0" AnchorPane.rightAnchor="0.0" />
                                 </children>
                              </AnchorPane>
                           </items>
                        </ToolBar>
                     </children>
                  </AnchorPane>
                <AnchorPane fx:id="handPanel" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
                     <children>
                        <ImageView fitHeight="286.0" fitWidth="252.0" layoutX="331.0" layoutY="-3.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@Estilo/Elegant.PNG" />
                           </image>
                        </ImageView>
                     </children>
                  </AnchorPane>
              </items>
            </SplitPane>
         </items>
      </SplitPane>
   </children>
</VBox>

【问题讨论】：

您为什么不尝试一些您在问题中链接的解决方案？ 布局问题的第一条规则：不要对大小/提示或位置进行硬编码 .. 与您的问题无关：公开显示 java 代码时遵守 java 命名约定 .. @James_D 我试过了，但没有得到想要的结果。 @kleopatra 你完全正确，注意到了。谢谢指出。 你为什么使用ToolBar，然后在其中放入AnchorPane，并在AnchorPane 中添加三个Nodes？我会将ToolBar 替换为HBox 并将三个Nodes 添加到`HBox。 【参考方案1】：

我会将ToolBar 替换为HBox，并将三个Nodes 添加到HBox。然后我会使用CSS 来获得我想要的样式。

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="750.0" prefWidth="880.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.GUI.controller.BioJavaController">
   <children>
      <MenuBar>
        <menus>
          <Menu mnemonicParsing="false" text="File">
            <items>
              <MenuItem mnemonicParsing="false" text="Close" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Edit">
            <items>
              <MenuItem mnemonicParsing="false" text="Delete" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Help">
            <items>
              <MenuItem mnemonicParsing="false" text="About" />
            </items>
          </Menu>
        </menus>
      </MenuBar>
      <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="728.0" prefWidth="883.0">
         <items>
            <AnchorPane prefHeight="200.0" prefWidth="200.0">
               <children>
                  <LineChart fx:id="LineChart" prefHeight="358.0" prefWidth="878.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                    <xAxis>
                      <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </LineChart>
               </children>
            </AnchorPane>
            <SplitPane dividerPositions="0.5, 0.5" prefHeight="333.0" prefWidth="878.0">
              <items>
                  <VBox>
                     <children>
                        <HBox alignment="CENTER" prefHeight="50.0" style="-fx-background-color: #707070,        linear-gradient(#fcfcfc, #f3f3f3),        linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%); -fx-background-insets: 0,1,2;; -fx-background-radius: 3,2,1;; -fx-padding: 3 30 3 30;; -fx-text-fill: black;;">
                           <children>
                              <Label maxWidth="1.7976931348623157E308" text="Counter" HBox.hgrow="ALWAYS" />
                              <Label maxWidth="1.7976931348623157E308" text="Number: 0" HBox.hgrow="ALWAYS" />
                              <Button fx:id="measureBtn_1" mnemonicParsing="false" onMouseClicked="#onMeasureClick" text="Count" />
                           </children>
                           <VBox.margin>
                              <Insets />
                           </VBox.margin>
                        </HBox>
                        <HBox alignment="CENTER" prefHeight="50.0" style="-fx-background-color: #707070,        linear-gradient(#fcfcfc, #f3f3f3),        linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%); -fx-background-insets: 0,1,2;; -fx-background-radius: 3,2,1;; -fx-padding: 3 30 3 30;; -fx-text-fill: black;;">
                           <children>
                              <Label maxWidth="1.7976931348623157E308" text="Counter" HBox.hgrow="ALWAYS" />
                              <Label maxWidth="1.7976931348623157E308" text="Number: 0" HBox.hgrow="ALWAYS" />
                              <Button fx:id="measureBtn_12" mnemonicParsing="false" onMouseClicked="#onMeasureClick" text="Count" />
                           </children>
                           <VBox.margin>
                              <Insets />
                           </VBox.margin>
                        </HBox>
                     </children>
                  </VBox>
                <AnchorPane fx:id="handPanel" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
                     <children>
                        <ImageView fitHeight="286.0" fitWidth="252.0" layoutX="331.0" layoutY="-3.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@Estilo/Elegant.PNG" />
                           </image>
                        </ImageView>
                     </children>
                  </AnchorPane>
                  <ToolBar prefHeight="40.0" prefWidth="200.0">
                    <items>
                      <Button mnemonicParsing="false" text="Button" />
                    </items>
                  </ToolBar>
              </items>
            </SplitPane>
         </items>
      </SplitPane>
   </children>
</VBox>

正常

全屏

样式代码来自：http://fxexperience.com/2011/12/styling-fx-buttons-with-css/。

【讨论】：

谢谢，我马上去研究答案和链接。我接受你的解决方案。

以上是关于如何正确地将自定义按钮集转换为响应对象？的主要内容，如果未能解决你的问题，请参考以下文章

ios开发 如何修改正确tabBar的高度？

如何正确地将自定义错误从后端（Express）传递到前端（Vue）

如何将自定义函数应用于 xarray.Dataset 坐标的每个值？

将自定义后退按钮替换为默认值

如何将自定义 Pytorch 模型转换为 torchscript（pth 到 pt 模型）？

Swift 4 如何将自定义对象数组转换为 JSON