CustomTkinter按钮展开动画实现求助：解决移位时的残影问题

核心实现思路 #

• 用变量记录当前展开的主按钮索引，管控全局状态
• 点击主按钮时优先收起已展开内容，再处理当前按钮的展开/折叠逻辑
• 通过逐帧动画移动按钮，避免直接修改布局参数导致的残影
• 附属按钮初始设为隐藏状态，展开时显示、收起时隐藏

完整实现代码 #

import customtkinter as ctk

ctk.set_appearance_mode("dark")
ctk.set_default_color_theme("blue")

class ExpandableButtonGroup(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.title("可展开按钮组")
        self.geometry("400x600")
        
        # 基础配置参数
        self.main_btn_count = 4
        self.sub_btn_count = 3
        self.btn_height = 40
        self.btn_y_gap = 10
        self.animation_step = 2  # 每帧移动像素
        self.animation_delay = 5  # 帧间隔毫秒
        
        # 状态变量
        self.current_expanded_idx = None  # 当前展开的主按钮索引
        self.main_btns = []
        self.sub_btn_groups = []  # 存储每个主按钮对应的附属按钮列表
        
        # 初始化按钮组件
        self._init_buttons()
    
    def _init_buttons(self):
        for i in range(self.main_btn_count):
            # 创建主按钮
            main_btn = ctk.CTkButton(
                self,
                text=f"主按钮 {i+1}",
                command=lambda idx=i: self.toggle_expand(idx)
            )
            # 计算初始位置
            initial_y = 20 + i * (self.btn_height + self.btn_y_gap)
            main_btn.place(x=20, y=initial_y, width=360, height=self.btn_height)
            self.main_btns.append(main_btn)
            
            # 创建附属按钮（初始隐藏）
            sub_btns = []
            for j in range(self.sub_btn_count):
                sub_btn = ctk.CTkButton(
                    self,
                    text=f"附属按钮 {i+1}-{j+1}",
                    fg_color="gray50",
                    hover_color="gray70"
                )
                sub_btn.place(x=60, y=-100, width=320, height=self.btn_height)
                sub_btns.append(sub_btn)
            self.sub_btn_groups.append(sub_btns)
    
    def toggle_expand(self, target_idx):
        # 处理已展开其他按钮的情况
        if self.current_expanded_idx is not None and self.current_expanded_idx != target_idx:
            self._collapse(self.current_expanded_idx)
            # 等待收起动画完成后展开目标按钮
            delay = self.animation_delay * (self.sub_btn_count * (self.btn_height + self.btn_y_gap) // self.animation_step)
            self.after(delay, lambda: self._expand(target_idx))
        elif self.current_expanded_idx == target_idx:
            # 点击已展开按钮，直接收起
            self._collapse(target_idx)
        else:
            # 无展开按钮，直接展开目标
            self._expand(target_idx)
    
    def _expand(self, idx):
        self.current_expanded_idx = idx
        main_btn = self.main_btns[idx]
        sub_btns = self.sub_btn_groups[idx]
        
        # 显示附属按钮并定位到主按钮下方
        start_y = main_btn.winfo_y() + self.btn_height + self.btn_y_gap
        for j, sub_btn in enumerate(sub_btns):
            sub_btn.place(x=60, y=start_y + j * (self.btn_height + self.btn_y_gap), 
                          width=320, height=self.btn_height)
        
        # 动画移动下方的主按钮
        for i in range(idx + 1, self.main_btn_count):
            target_y = self.main_btns[i].winfo_y() + self.sub_btn_count * (self.btn_height + self.btn_y_gap)
            self._animate_move(self.main_btns[i], self.main_btns[i].winfo_y(), target_y)
    
    def _collapse(self, idx):
        sub_btns = self.sub_btn_groups[idx]
        
        # 隐藏附属按钮
        for sub_btn in sub_btns:
            sub_btn.place_forget()
        
        # 动画移回下方的主按钮
        for i in range(idx + 1, self.main_btn_count):
            target_y = self.main_btns[i].winfo_y() - self.sub_btn_count * (self.btn_height + self.btn_y_gap)
            self._animate_move(self.main_btns[i], self.main_btns[i].winfo_y(), target_y)
        
        self.current_expanded_idx = None
    
    def _animate_move(self, widget, start_y, target_y):
        # 计算每帧的新位置
        if start_y < target_y:
            new_y = min(start_y + self.animation_step, target_y)
        else:
            new_y = max(start_y - self.animation_step, target_y)
        
        widget.place_configure(y=new_y)
        
        # 未到目标位置则继续动画
        if new_y != target_y:
            self.after(self.animation_delay, lambda: self._animate_move(widget, new_y, target_y))

if __name__ == "__main__":
    app = ExpandableButtonGroup()
    app.mainloop()

关键细节说明 #

• 残影消除：通过_animate_move逐帧调整按钮位置，避免一次性大幅修改布局导致的界面闪烁
• 状态管控：current_expanded_idx确保同一时间仅展开一组按钮，逻辑清晰无冲突
• 布局灵活性：所有位置通过动态计算得出，修改按钮数量、尺寸等参数无需大幅调整代码
• 视觉区分：附属按钮使用不同配色，和主按钮形成清晰的层级差异

内容的提问来源于stack exchange，提问作者рома