Kivy/Python如何避免widget/layout重叠及图片显示、滚动异常问题

核心问题修复点 #

• 窗口尺寸变化间距不同步
  1. 移除重复ID（同kv文件中ID不能重复，原代码里有3个id为t1bl1的组件）
  2. 所有内层GridLayout添加size_hint_x: 1，自动适配父容器宽度，无需手动绑定width: self.width
  3. Tab下的根GridLayout替换为size_hint: 1,1，删除height: self.minimum_height，确保占满整个Tab内容区
• 图片仅显示部分+无法横向滚动
  1. 横向滚动的内层ScrollView的子GridLayout（id:t1img）添加size_hint_x: None和width: self.minimum_width，让布局宽度适配所有子图片总宽度，触发横向滚动
  2. 两个Image组件统一配置：

  size_hint: None, None
  height: 300 # 可自定义合适高度
  width: self.texture_size[0] # 或固定为root.width * 0.9等你需要的宽度
  allow_stretch: True # 可选，避免图片变形
  

• 后续组件重叠覆盖图片
  1. 所有设置了size_hint_y: None的GridLayout（包括id:t1bl1_1、id:t1bl2_SubH1等）取消注释height: self.minimum_height，确保布局高度自动适配子组件高度，不会塌陷为0
  2. 内层横向ScrollView（id:innerscroll）添加size_hint_y: None和height: t1img.height，适配内部图片高度

修正后核心KV代码片段 #

MyLayout: 
    do_default_tab: False
    size_hint: 1, 1
    padding: 10
    tab_pos: 'top_left'
    
    TabbedPanelItem:
        id: tab1
        text: "Nifty 50"
        
        GridLayout:
            id:tab_root
            size_hint: 1,1
            cols:1
                                    
            ScrollView:
                do_scroll_x:False
                do_scroll_y: True
                size_hint_y:0.9
                pos_hint: {"x": 0.05, "y":0.11}
                
                GridLayout:
                    id:tmain
                    size_hint_x: 1
                    size_hint_y: None
                    height: self.minimum_height
                    cols:1
                    spacing: 10
        
                    GridLayout:
                        id:title_layout
                        spacing:10
                        size_hint_x: 1
                        size_hint_y: None
                        height: self.minimum_height
                        cols:1
                                    
                        Label:
                            id:t1heading
                            font_size:12
                            bold:True
                            multiline: False
                            text: 'NIFTY 50 STRATEGY RETURNS'
                            size: self.texture_size
                            size_hint_y: None
                            border:(10,10,10,10)
                            
                    GridLayout:
                        cols:2
                        id:metrics_layout
                        background_color:[0, 0, 1, 1]
                        size_hint_x: 1
                        size_hint_y: None
                        height: self.minimum_height
                            
                        Label:
                            id:t1bl1_1lbl
                            font_size: 10
                            multiline: True
                            text: ''
                            size: self.texture_size
                        # 其余Label保持原有配置即可
                        
                    ScrollView:
                        id:innerscroll
                        do_scroll_x:True
                        do_scroll_y: False
                        size_hint_y: None
                        height: t1img.height
                        GridLayout:
                            id:t1img
                            rows:1  
                            size_hint_x: None
                            size_hint_y:None
                            width: self.minimum_width
                            height: self.minimum_height
                                    
                            Image:
                                id:img1
                                source:'plot.png'
                                size_hint:(None,None)
                                height: 300
                                width: self.texture_size[0]
                                allow_stretch: True
                                
                            Image:
                                id:img2
                                source:'plot.png'
                                size_hint:(None,None)
                                height: 300
                                width: self.texture_size[0]
                                allow_stretch: True
                                
                    GridLayout:
                        id:t1subhead
                        cols:1
                        size_hint_y: None
                        height: self.minimum_height
                                
                        Label:
                            id:t1heading2
                            font_size:12
                            bold:True
                            multiline: False
                            text: 'MODEL PORTFOLIO FOR THE MONTH'
                            size: self.texture_size
                            size_hint_y: None
                            border:(10,10,10,10)
                                
                    GridLayout:
                        cols:2
                        id:portfolio_layout
                        size_hint_x: 1
                        size_hint_y: None
                        height: self.minimum_height
                            
                        Label:
                            id:t1bl2_1lb1
                            font_size: 10
                            text: ''
                            size: self.texture_size
                        # 其余Label保持原有配置即可

            BoxLayout:
                id:btn_layout
                size_hint:(1, 0.1)
                Button:
                    id:t1bl2_1
                    text:"Past Performance" 
                    size_hint:(.5, 1)
                    on_press:root.hello_on()   
                          
                Button:
                    id:t1bl2_2
                    text: "Portfolio"
                    size_hint:(0.5,1) 
                    on_press:root.perf_on() 

异常效果截图 #

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