悬停以及点击切换图片

为了实现悬停切换图片的功能，我们可以为每个按钮添加鼠标悬停事件监听器。以下是详细步骤和代码：

1. 首先在控制器类中添加初始化方法，并添加事件监听器：

package com.example.demo6;import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
import javafx.scene.image.ImageView;public class LoginController {// 原有的FXML注入字段保持不变...@FXMLpublic void initialize() {// 初始化所有悬停图片为不可见setHoverImagesVisible(false);// 为所有按钮绑定悬停效果bindHoverEffects();}private void setHoverImagesVisible(boolean visible) {friend2.setVisible(visible);message2.setVisible(visible);info2.setVisible(visible);avatar2.setVisible(visible);memes2.setVisible(visible);file2.setVisible(visible);photo2.setVisible(visible);voice2.setVisible(visible);}private void bindHoverEffects() {setupHoverEffect(friend, friend1, friend2);setupHoverEffect(message, message1, message2);setupHoverEffect(info, info1, info2);setupHoverEffect(avatar, avatar1, avatar2);setupHoverEffect(memes, memes1, memes2);setupHoverEffect(file, file1, file2);setupHoverEffect(photo, photo1, photo2);setupHoverEffect(voice, voice1, voice2);}private void setupHoverEffect(Button button, ImageView normal, ImageView hover) {button.setOnMouseEntered(event -> {normal.setVisible(false);hover.setVisible(true);});button.setOnMouseExited(event -> {normal.setVisible(true);hover.setVisible(false);});}// 原有的空方法可以保留或移除（如果不需要点击事件）@FXMLvoid exchange(ActionEvent event) {// 如果需要保留点击功能可以在这里添加代码}// 其他exchange方法同理...
}

2. 确保FXML中成对的ImageView初始状态正确（默认显示第一个图片），或者在initialize方法中设置初始可见性。
3. 如果需要保留点击切换功能，可以在原有exchange方法中添加切换逻辑：

@FXML
void exchange(ActionEvent event) {boolean visible = friend2.isVisible();friend1.setVisible(!visible);friend2.setVisible(visible);
}

实现原理：

1. 使用setOnMouseEntered和setOnMouseExited事件监听器
2. 通过控制ImageView的visible属性切换图片显示
3. 初始化时将所有悬停状态图片设为不可见
4. 使用通用方法setupHoverEffect为所有按钮统一添加效果

注意事项：

1. 确保图片资源路径正确
2. 检查FXML中ImageView的叠加顺序（后定义的会在上层）
3. 如果不需要点击事件，可以移除对应的onAction属性和控制器方法
4. 所有按钮的style都设置了transparent背景以保证视觉效果

这个实现会在鼠标进入按钮区域时显示悬停图片，离开时恢复默认图片。如果需要添加点击效果，可以在原有exchange方法中补充切换逻辑。

让我们分步实现点击保持状态的功能，同时保留其他按钮的悬停效果。以下是完整实现方案：

package com.example.demo6;import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;public class LoginController {// 保持原有FXML注入字段...@FXML private Button friend;@FXML private ImageView friend1;@FXML private ImageView friend2;@FXML private Button avatar;@FXML private ImageView avatar1;@FXML private ImageView avatar2;@FXML private Button info;@FXML private ImageView info1;@FXML private ImageView info2;@FXML private Button message;@FXML private ImageView message1;@FXML private ImageView message2;private Button activeButton; // 当前激活的按钮@FXMLpublic void initialize() {// 初始化所有悬停图片为不可见setInitialStates();// 绑定悬停效果（所有按钮）bindHoverEffects();// 绑定点击效果（特定按钮）bindClickEffects();}private void setInitialStates() {// 设置初始可见性（确保FXML中默认显示1号图片）friend2.setVisible(false);avatar2.setVisible(false);info2.setVisible(false);message2.setVisible(false);// 其他按钮的初始化（如有需要）// memes2.setVisible(false);// file2.setVisible(false);// ...}private void bindHoverEffects() {// 所有按钮的悬停效果setupHoverEffect(friend, friend1, friend2);setupHoverEffect(avatar, avatar1, avatar2);setupHoverEffect(info, info1, info2);setupHoverEffect(message, message1, message2);// 其他按钮的悬停效果// setupHoverEffect(memes, memes1, memes2);// setupHoverEffect(file, file1, file2);// ...}private void bindClickEffects() {// 特定按钮的点击效果setupClickEffect(friend, friend1, friend2);setupClickEffect(avatar, avatar1, avatar2);setupClickEffect(info, info1, info2);setupClickEffect(message, message1, message2);}// 悬停效果处理（通用方法）private void setupHoverEffect(Button btn, ImageView normal, ImageView hover) {btn.setOnMouseEntered(e -> {if (btn != activeButton) { // 非激活状态才响应悬停normal.setVisible(false);hover.setVisible(true);}});btn.setOnMouseExited(e -> {if (btn != activeButton) { // 非激活状态才恢复normal.setVisible(true);hover.setVisible(false);}});}// 点击效果处理（特定按钮）private void setupClickEffect(Button btn, ImageView normal, ImageView active) {btn.setOnAction(e -> {if (btn == activeButton) {// 点击已激活的按钮：取消激活normal.setVisible(true);active.setVisible(false);activeButton = null;} else {// 取消之前的激活状态if (activeButton != null) {resetPreviousActive();}// 设置新的激活状态normal.setVisible(false);active.setVisible(true);activeButton = btn;}});}private void resetPreviousActive() {// 根据按钮类型重置状态if (activeButton == friend) {friend1.setVisible(true);friend2.setVisible(false);} else if (activeButton == avatar) {avatar1.setVisible(true);avatar2.setVisible(false);} else if (activeButton == info) {info1.setVisible(true);info2.setVisible(false);} else if (activeButton == message) {message1.setVisible(true);message2.setVisible(false);}}
}

实现说明：

1. 状态管理机制
   • 使用 activeButton 变量跟踪当前激活的按钮• 点击时检查是否重复点击同一按钮，实现状态切换
2. 悬停与激活状态的关系

// 在悬停处理中增加状态判断
if (btn != activeButton) {// 只有非激活按钮才会响应悬停
}

3. 点击逻辑流程

FXML 需要调整的部分：

<!-- 移除所有按钮的 onAction 属性 -->
<Button fx:id="friend" ... />  <!-- 原 onAction="#exchange" 需要删除 -->
<Button fx:id="avatar" ... />
<Button fx:id="info" ... />
<Button fx:id="message" ... />

验证步骤：

1. 点击 “好友” 按钮 → friend2 保持显示
2. 悬停 “消息” 按钮 → 显示 message2（此时消息未激活）
3. 点击 “消息” 按钮 → friend2 消失，message2 保持显示
4. 再次点击 “消息” → message2 消失，恢复 message1

常见问题处理：

现象	可能原因	解决方案
点击无反应	FXML 中保留 onAction 属性	删除所有按钮的 onAction 属性
图片显示叠加	ImageView 层级问题	确保 FXML 中 2 号图片定义在 1 号之后
激活状态无法取消	activeButton 未置空	检查 resetPreviousActive 逻辑
悬停效果干扰激活状态	未正确判断 activeButton	确认悬停处理中的状态判断逻辑

这个方案实现了：
• 点击特定按钮保持激活状态

• 同一时间只能有一个激活状态

• 激活按钮不受悬停效果影响

• 其他按钮保留原有悬停功能

• 可通过二次点击取消激活状态

如果需要调整激活状态的视觉效果，可以修改对应图片的可见性逻辑。如果还需要其他按钮的点击效果，可以通过相同模式扩展 setupClickEffect 方法。

package com.example.demo6;import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
import javafx.scene.image.ImageView;public class LoginController {public ImageView qq2;@FXMLprivate Button avatar;@FXMLprivate ImageView avatar1;@FXMLprivate ImageView avatar2;@FXMLprivate Button file;@FXMLprivate ImageView file1;@FXMLprivate ImageView file2;@FXMLprivate Button friend;@FXMLprivate ImageView friend1;@FXMLprivate ImageView friend2;@FXMLprivate Button info;@FXMLprivate ImageView info1;@FXMLprivate ImageView info2;@FXMLprivate Button memes;@FXMLprivate ImageView memes1;@FXMLprivate ImageView memes2;@FXMLprivate Button message;@FXMLprivate ImageView message1;@FXMLprivate ImageView message2;@FXMLprivate Button photo;@FXMLprivate ImageView photo1;@FXMLprivate ImageView photo2;@FXMLprivate ListView<?> qq;@FXMLprivate TextField search;@FXMLprivate TextField search2;@FXMLprivate ImageView setting;@FXMLprivate Button voice;@FXMLprivate ImageView voice1;@FXMLprivate ImageView voice2;@FXMLprivate Button activeButton; // 当前激活的按钮@FXMLpublic void initialize() {// 初始化所有悬停图片为不可见setInitialStates();// 绑定悬停效果（所有按钮）bindHoverEffects();// 绑定点击效果（特定按钮）bindClickEffects();}private void setInitialStates() {// 设置初始可见性（确保FXML中默认显示1号图片）friend2.setVisible(false);avatar2.setVisible(false);info2.setVisible(false);message2.setVisible(false);memes2.setVisible(false);file2.setVisible(false);photo2.setVisible(false);voice2.setVisible(false);}private void bindHoverEffects() {setupHoverEffect(friend, friend1, friend2);setupHoverEffect(message, message1, message2);setupHoverEffect(info, info1, info2);setupHoverEffect(avatar, avatar1, avatar2);setupHoverEffect(memes, memes1, memes2);setupHoverEffect(file, file1, file2);setupHoverEffect(photo, photo1, photo2);setupHoverEffect(voice, voice1, voice2);}private void bindClickEffects() {// 特定按钮的点击效果setupClickEffect(friend, friend1, friend2);setupClickEffect(avatar, avatar1, avatar2);setupClickEffect(info, info1, info2);setupClickEffect(message, message1, message2);}// 悬停效果处理（通用方法）private void setupHoverEffect(Button btn, ImageView normal, ImageView hover) {btn.setOnMouseEntered(e -> {if (btn != activeButton) { // 非激活状态才响应悬停normal.setVisible(false);hover.setVisible(true);}});btn.setOnMouseExited(e -> {if (btn != activeButton) { // 非激活状态才恢复normal.setVisible(true);hover.setVisible(false);}});}// 点击效果处理（特定按钮）private void setupClickEffect(Button btn, ImageView normal, ImageView active) {btn.setOnAction(e -> {if (btn == activeButton) {// 点击已激活的按钮：取消激活normal.setVisible(true);active.setVisible(false);activeButton = null;} else {// 取消之前的激活状态if (activeButton != null) {resetPreviousActive();}// 设置新的激活状态normal.setVisible(false);active.setVisible(true);activeButton = btn;}});}private void resetPreviousActive() {// 根据按钮类型重置状态if (activeButton == friend) {friend1.setVisible(true);friend2.setVisible(false);} else if (activeButton == avatar) {avatar1.setVisible(true);avatar2.setVisible(false);} else if (activeButton == info) {info1.setVisible(true);info2.setVisible(false);} else if (activeButton == message) {message1.setVisible(true);message2.setVisible(false);}}@FXMLvoid exchange(ActionEvent event) {}@FXMLvoid exchangeAvatar(ActionEvent event) {}@FXMLvoid exchangeFile(ActionEvent event) {}@FXMLvoid exchangeInfo(ActionEvent event) {}@FXMLvoid exchangeMemes(ActionEvent event) {}@FXMLvoid exchangeMessage(ActionEvent event) {}@FXMLvoid exchangePhoto(ActionEvent event) {}@FXMLvoid exchangeVoice(ActionEvent event) {}}