JavaFX - 如何防止工具栏更改按钮状态更改的宽度 [英] JavaFX - How to prevent Toolbar from changing width on button state changes

问题描述

我遇到TooBar的问题，当其中一个包含的ToggleButtons获得/失去焦点或被检查/取消选中时 - 它们的视觉外观会稍微变大/变小几个像素，但工具栏会相应地调整其宽度。

I have a problem with TooBar, when one of the included ToggleButtons gain/looses focus or gets checked/unchecked - their visual appearance become slightly bigger / or smaller by a few pixels but the Toolbar adjusts its width accordingly.

当我点击其他一些UI元素时 - 对象按钮失去焦点，变得更小，工具栏宽度减小。工具栏大小一直在变化，这很令人讨厌。此外，第二个按钮与第一个按钮不对齐。

When I click on some other UI element - "Objects button" losses focus, becomes smaller and Toolbar width decreases. It's quite annoying that Toolbar size changes all the time. Also, the second button becomes not aligned with first one.

这里可以做什么来保持所有按钮始终对齐，无论其当前状态如何并且工具栏宽度已修复？

What can be done here to keep all buttons aligned all the time regardless of their current state and have Toolbar width fixed ?

垂直工具栏的代码是：

<HBox fx:id="leftPanelSwitchPanel">
        <ToolBar orientation="VERTICAL" style="-fx-base: #d1ffd3;">
            <Group>
                <ToggleButton fx:id="objectListPanelSwitch" rotate="-90.0" text="Objects">
                    <graphic>
                        <MaterialIconView glyphName="FORMAT_LIST_BULLETED" />
                    </graphic>
                </ToggleButton>
            </Group>
            <Group>
                <ToggleButton fx:id="objectPropertiesPanelSwitch" rotate="-90.0" text="Properties">
                    <graphic>
                        <MaterialIconView glyphName="SETTINGS_APPLICATIONS" />
                    </graphic>
                </ToggleButton>
            </Group>
        </ToolBar>
    </HBox>

推荐答案

您可以更改聚焦按钮/切换按钮css：

You can change focused button/toggle-button css:

.button:focused {
  -fx-background-color: -fx-outer-border, -fx-inner-border, #d5e1f2;
  -fx-background-insets: 0, 1, 2;
  -fx-background-radius: 5, 4, 3;
} 
.toggle-button:focused {
  -fx-background-color: -fx-outer-border, -fx-inner-border, #d5e1f2;
  -fx-background-insets: 0, 1, 2;
  -fx-background-radius: 5, 4, 3;
} 

详见：如何摆脱JavaFX中的焦点突出显示

这篇关于JavaFX - 如何防止工具栏更改按钮状态更改的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！