按钮边框仅在一侧，限制用户在SplitPane中调整HBox的大小，鼠标悬停时停止按钮文本缩小

时间：2019-06-08 15:00:57

标签： css javafx netbeans fxml scenebuilder

我正在使用场景构建器和NetBeans11。我面临三个问题。 随附图片以更好地了解我的问题。

  1. 当我运行我的Calculator项目时，用户可以调整HBox内部的textField的大小。调整大小箭头出现在上面，我可以向上滚动并调整大小。运行项目后，我不想调整大小。

  2. 当我将鼠标箭头悬停在按钮上时，其中的文本会自动缩小并变小。我希望文本保持其原始大小。我不知道为什么会这样。我在任何文件中都找不到相同的代码。

  3. 我只想在gridPane的子级按钮右边有边框。当我使用-fx-border-（CSS属性）时，在按钮的四个侧面都显示了边框。我希望它只在一侧。

调整箭头图像的大小 https://imgur.com/eY0pnz3

调整大小后的图像 https://imgur.com/jRIbVTN

文字缩小问题 https://imgur.com/r30ya97

一侧边框效果 https://imgur.com/wj6uver

我想用白色光泽效果的线条代替使用CSS显示的红色线条

这是我的fxml代码

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.MenuButton?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="563.0" prefWidth="342.0" stylesheets="@../styles/Styles.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="342.0" AnchorPane.bottomAnchor="363.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <items>
            <HBox fx:id="hboxView" maxHeight="-Infinity" prefHeight="49.0" prefWidth="341.0">
               <children>
                  <MenuButton fx:id="optionView" alignment="BOTTOM_CENTER" mnemonicParsing="false" prefHeight="46.0" prefWidth="47.0" stylesheets="@../styles/Styles.css" HBox.hgrow="ALWAYS">
                    <items>
                      <MenuItem fx:id="opt_std" mnemonicParsing="false" text="Standard" />
                      <MenuItem fx:id="opt_sci" mnemonicParsing="false" text="Scientifics" />
                    </items>
                  </MenuButton>
               </children>
            </HBox>
            <HBox prefHeight="100.0" prefWidth="200.0">
               <children>
                  <TextField fx:id="textView" editable="false" prefHeight="141.0" prefWidth="342.0" HBox.hgrow="ALWAYS" />
               </children>
            </HBox>
        </items>
      </SplitPane>
      <GridPane fx:id="gridView" layoutX="-2.0" layoutY="227.0" prefHeight="363.0" prefWidth="342.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="199.8">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Button fx:id="minus" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="-" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
               <graphic>

               </graphic>
            </Button>
            <Button fx:id="plus" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="70.0" prefWidth="71.0" text="+" textAlignment="CENTER" GridPane.columnIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="cancel" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="69.0" text="X" textAlignment="CENTER" GridPane.columnIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="allClear" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="74.0" text="AC" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="four" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="4" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="nine" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="75.0" prefWidth="68.0" text="9" textAlignment="CENTER" GridPane.columnIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="five" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="5" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="six" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="71.0" text="6" textAlignment="CENTER" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="Eight" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="75.0" prefWidth="68.0" text="8" textAlignment="CENTER" GridPane.columnIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="percentage" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="73.0" text="\%" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="decimal" alignment="CENTER" contentDisplay="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="68.0" text="." textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="3">
               <font>
                  <Font size="32.0" />
               </font>
            </Button>
            <Button fx:id="zero" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="0" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="squareRoot" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="67.0" text="sqrt" textAlignment="CENTER" GridPane.rowIndex="3">
               <font>
                  <Font size="20.0" />
               </font>
            </Button>
            <Button fx:id="divide" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="74.0" text="/" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="equal" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="=" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="one" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="72.0" text="1" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="two" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="69.0" text="2" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="three" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="68.0" text="3" textAlignment="CENTER" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="mul" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="72.0" text="*" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="sin" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="Sin" textAlignment="CENTER" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="73.0" text="x^2" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="4" fx:id="xSquare">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="74.0" text="1/x" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="4" fx:id="xInverse">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="tan" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="68.0" text="Tan" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="cos" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="70.0" prefWidth="68.0" text="Cos" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="seven" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="75.0" prefWidth="68.0" text="7" textAlignment="CENTER">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
         </children>
      </GridPane>
   </children>
</AnchorPane>

这是我的CSS代码

.button {
    -fx-font-weight: bold;
}

#optionView
{
    -fx-border-width: 1.4;
    -fx-border-color: black;
    -fx-background-color:rgb( 244, 208, 63 );
    -fx-background-size: 30,30;
    -fx-background-repeat: no-repeat;
    -fx-background-position:left,center;
    -fx-background-image: url(option.png);
}
#hboxView
{
 -fx-background-color: rgb(42,71,71);   
}
#gridView
{
    -fx-background-color:white;

}
#optionView:hover
{
    -fx-background-color: rgb( 88, 214, 141 );
}
#optionView:pressed
{
    -fx-background-color: rgb( 88, 214, 141 );
}

#opt_std
{
    -fx-font-weight: bold;  
}
#opt_sci
{
    -fx-font-weight: bold;
}

#textView
{
    -fx-text-fill: white;
    -fx-font-weight:bold;
    -fx-background-color:  rgb(42,71,71) ;    
}
.button{
    -fx-background-radius: 0;
}
#one
{

    -fx-text-fill:White;


    -fx-background-color:rgb(42,71,71);
}

#two
{

    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#three
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#four
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#five
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#six
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#seven
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#Eight
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#nine
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#ten
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#cancel
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#allClear
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}

#equal
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#squareRoot
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#zero
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#decimal
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#percentage
{
    -fx-text-fill:White;
    -fx-background-color:rgb(42,71,71);
}
#plus
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#minus
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#divide
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#sin
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#cos
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#tan
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#xInverse
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#xSquare
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);
}
#mul
{
    -fx-text-fill:rgb( 243, 156, 18 );
    -fx-background-color:rgb(42,71,71);

}

请参考所有图片

0 个答案:

没有答案
相关问题
最新问题