悬停以及点击切换图片

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

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

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注入字段保持不变...
    
    @FXML
    public 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);
        });
    }

    // 原有的空方法可以保留或移除（如果不需要点击事件）
    @FXML
    void exchange(ActionEvent event) {
        // 如果需要保留点击功能可以在这里添加代码
    }

    // 其他exchange方法同理...
}

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

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

实现原理：

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

注意事项：

确保图片资源路径正确
检查FXML中ImageView的叠加顺序（后定义的会在上层）
如果不需要点击事件，可以移除对应的onAction属性和控制器方法
所有按钮的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; // 当前激活的按钮

    @FXML
    public 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);
        }
    }
}

实现说明：

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

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

点击逻辑流程

FXML 需要调整的部分：

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

验证步骤：

点击 “好友” 按钮 → friend2 保持显示
悬停 “消息” 按钮 → 显示 message2（此时消息未激活）
点击 “消息” 按钮 → friend2 消失，message2 保持显示
再次点击 “消息” → 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;
    @FXML
    private Button avatar;

    @FXML
    private ImageView avatar1;

    @FXML
    private ImageView avatar2;

    @FXML
    private Button file;

    @FXML
    private ImageView file1;

    @FXML
    private ImageView file2;

    @FXML
    private Button friend;

    @FXML
    private ImageView friend1;

    @FXML
    private ImageView friend2;

    @FXML
    private Button info;

    @FXML
    private ImageView info1;

    @FXML
    private ImageView info2;

    @FXML
    private Button memes;

    @FXML
    private ImageView memes1;

    @FXML
    private ImageView memes2;

    @FXML
    private Button message;

    @FXML
    private ImageView message1;

    @FXML
    private ImageView message2;

    @FXML
    private Button photo;

    @FXML
    private ImageView photo1;

    @FXML
    private ImageView photo2;

    @FXML
    private ListView<?> qq;

    @FXML
    private TextField search;

    @FXML
    private TextField search2;

    @FXML
    private ImageView setting;

    @FXML
    private Button voice;

    @FXML
    private ImageView voice1;

    @FXML
    private ImageView voice2;

    @FXML
    private Button activeButton; // 当前激活的按钮
    @FXML
    public 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);
        }
    }

    @FXML
    void exchange(ActionEvent event) {

    }

    @FXML
    void exchangeAvatar(ActionEvent event) {

    }

    @FXML
    void exchangeFile(ActionEvent event) {

    }

    @FXML
    void exchangeInfo(ActionEvent event) {

    }

    @FXML
    void exchangeMemes(ActionEvent event) {

    }

    @FXML
    void exchangeMessage(ActionEvent event) {

    }

    @FXML
    void exchangePhoto(ActionEvent event) {

    }

    @FXML
    void exchangeVoice(ActionEvent event) {

    }

}