使用Toga Slider切换网络图片失败，求解决方案

我尝试用Toga框架开发程序，通过Slider组件让用户切换查看不同图片，ImageView从URL加载图片（URL仅数字部分不同）。滑动滑块时能正确格式化刻度值，但所有刻度都加载初始值对应的图片，试了try语句、for循环等方法都无效，附上两段相关代码：

第一段代码 #

def sliderFunction(widget):
    self.timeZoneValue1 = self.timeZone1.value[:-1] # 格式化变量
    
    x = int(slider.value) 
    if x < 10:
        x = '%03d'%(int('00') + x) # 格式化变量
    else:
        x = '%03d'%(int('0') + x)
    print(x)

    try:
        self.home_box5.remove(view) # 尝试先移除旧图片
    except:
        pass

    view = toga.ImageView(image = 'http://www./forecast/{}/{}{}/{}/{}{}_{}_{}_{}.png'.format(self.modelDeterministic.value, self.day1.strftime('%Y%m%d'), self.timeZoneValue1, self.zone, self.modelDeterministic.value, self.zone, self.height, self.option, str(x)))
    
    self.home_box5.add(view)

slider = toga.Slider(on_change = sliderFunction, tick_count = 61, range = (0,60), value = 0)
self.home_box5.add(slider)

第二段代码 #

viewAll = []
for i in range(60):
    self.timeZoneValue1 = self.timeZone1.value[:-1]
    
    x = int(i)
    if x < 10:
        x = '%03d'%(int('00') + x)
    else:
        x = '%03d'%(int('0') + x)

    view = toga.ImageView(image = 'http://www./forecast/{}/{}{}/{}/{}{}_{}_{}_{}.png'.format(self.modelDeterministic.value, self.day1.strftime('%Y%m%d'), self.timeZoneValue1, self.zone, self.modelDeterministic.value, self.zone, self.height, self.option, str(x)))
    
    viewAll.append(view)

def sliderFunction(widget):
    for i in range(60):
        self.home_box5.add(viewAll[i])

slider = toga.Slider(on_change = sliderFunction, tick_count = 61, range = (0,60), value = 0)
self.home_box5.add(slider)

问题原因及解决方法 #

针对第一段代码的问题 #

1. Slider值引用错误：slider.value是外部变量，回调函数中应使用传入的widget参数获取当前值（widget.value），否则可能始终获取初始值。
2. ImageView实例未持久化：view是局部变量，无法关联旧实例导致旧图片无法移除，新图叠加在旧图上。需将view保存为类属性（如self.current_view）。
3. 数字格式化优化：用f"{x:03d}"替代if-else，直接生成三位带前导零的字符串。

修正后的第一段代码：

def sliderFunction(widget):
    self.timeZoneValue1 = self.timeZone1.value[:-1]
    
    x = int(widget.value)
    x_str = f"{x:03d}"  # 简化格式化
    print(x_str)

    # 移除旧图片（如果存在）
    if hasattr(self, 'current_view'):
        self.home_box5.remove(self.current_view)

    # 创建新ImageView并保存为类属性
    img_url = f"http://www./forecast/{self.modelDeterministic.value}/{self.day1.strftime('%Y%m%d')}{self.timeZoneValue1}/{self.zone}/{self.modelDeterministic.value}{self.zone}_{self.height}_{self.option}_{x_str}.png"
    self.current_view = toga.ImageView(image=img_url)
    self.home_box5.add(self.current_view)

slider = toga.Slider(on_change=sliderFunction, tick_count=61, range=(0,60), value=0)
self.home_box5.add(slider)

针对第二段代码的问题 #

回调函数循环添加所有图片导致叠加显示，应根据滑块值仅显示对应图片，同时移除旧图：

修正后的第二段代码：

self.viewAll = []  # 改为类属性，方便回调访问
for i in range(61):  # 滑块范围0-60，共61个值
    self.timeZoneValue1 = self.timeZone1.value[:-1]
    x_str = f"{i:03d}"
    img_url = f"http://www./forecast/{self.modelDeterministic.value}/{self.day1.strftime('%Y%m%d')}{self.timeZoneValue1}/{self.zone}/{self.modelDeterministic.value}{self.zone}_{self.height}_{self.option}_{x_str}.png"
    view = toga.ImageView(image=img_url)
    self.viewAll.append(view)

self.current_view_index = 0  # 保存当前显示的图片索引
self.home_box5.add(self.viewAll[0])  # 初始显示第一张图

def sliderFunction(widget):
    current_x = int(widget.value)
    # 移除当前显示的旧图片
    self.home_box5.remove(self.viewAll[self.current_view_index])
    # 添加新图片并更新索引
    self.home_box5.add(self.viewAll[current_x])
    self.current_view_index = current_x

slider = toga.Slider(on_change=sliderFunction, tick_count=61, range=(0,60), value=0)
self.home_box5.add(slider)

关键注意点 #

• 回调中需访问的变量（如viewAll、current_view）必须是类属性（self.xxx），避免局部变量作用域问题。
• 每次切换必须移除旧ImageView，否则新图叠加导致视觉无变化。
• 滑块当前值必须通过widget.value获取，而非定义时的变量。

内容的提问来源于stack exchange，提问作者Faye