简体   繁体   中英

Kivy python Gridlayout Layout Size / Resizing issue

Hey I got a problem with my Gridlayout not wanting to resize to fullscreen: The red line here shows where kivy thinks the window stops.

My thinking:

I made a Gridlayout with 1 Column as a base layout to which I add everything. I then add the top bar (gridlayout with 3 columns / Buttons) to the base layer. I then made a scrollable space which I add to the base layer as well, so that the top bar at the top stays on the screen all the time and doesn't move with the scrolling.

But for some reason, I guess my base Layer doesnt scale / take up all the space within the app.

Here is also the PNG Files I am working with, doesn't matter what png is being used for testing Test PNGs like shown down below

红线表示截止点

from kivy.app import App
from kivy.uix.image import Image
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.core.window import Window
from kivy.uix.scrollview import ScrollView
from kivy.uix.boxlayout import BoxLayout
import pandas as pd
     
class InfoPage(GridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.cols = 1
        self.size_hint = (0.9,0.9)
        self.pos_hint = {"center_x": 0.5, "center_y":0.5}
        self.spacing = 10
        self.bind(minimum_height = self.setter('height'))
        
    #Base Layout
        self.base_layout = GridLayout(size_hint=(1,None), cols=1, spacing=20)
        self.base_layout.bind(minimum_height=self.base_layout.setter('height'))
        
#Top Bar with Buttons "1", "2" & "3"
        self.top_bar_layout = BoxLayout(orientation="horizontal", size_hint=(1, .1), spacing=10)
        self.back_to_mainpage = (Button(text= "Back to MainPage",
                                size_hint = (1,0.2),
                                bold = True,
                                background_color = '#00FFCE',
                             ))
        
        self.top_bar_layout.add_widget(self.back_to_mainpage)
        self.top_bar_layout.add_widget(Button(text= "Button 2",
                             size_hint = (1,0.2),
                             bold = True,
                             background_color = '#00FFCE'))
        self.top_bar_layout.add_widget(Button(text= "Button 3",
                             size_hint = (1,0.2),
                             bold = True,
                             background_color = '#00FFCE'))

#Scroll View Base Layout
        self.scroll_view_base_layout = GridLayout(cols=1, size_hint_y=None)
        self.scroll_view_base_layout.bind(minimum_height = self.scroll_view_base_layout.setter('height'))

#Scrollable Content

    #Label Grid
        self.content_scroll_view_top_label = GridLayout(size_hint_y = None, row_default_height=80, cols=2)
        self.content_scroll_view_top_label.bind(minimum_height=self.content_scroll_view_top_label.setter('height'))
        
        self.content_scroll_view_top_label.add_widget(Label( 
                text= "Avalanche \n \n Profile:",
                font_size = 20,
                color='00FFCE',
                size_hint = (0.5,1),
                halign="center",
                valign="middle",
                ))
        self.content_scroll_view_top_label.add_widget(Label( 
                text= "Weather \n \n Data (Past):",
                font_size = 20,
                color='00FFCE',
                size_hint = (0.5,1),
                halign="center",
                valign="middle",
                ))
        
    #Png Grid
        self.content_scroll_view_top_png = GridLayout(size_hint_y=None, row_default_height=1000, cols=2)
        self.content_scroll_view_top_png.bind(minimum_height=self.content_scroll_view_top_png.setter('height'))
        
        self.content_scroll_view_top_png.add_widget(Image(source="Data_files\Changing_Data\Outputs\snowprofile_15444-1.png"))
        self.content_scroll_view_top_png.add_widget(Image(source="Data_files\Changing_Data\Outputs\Arlingsattel.png"))

    #Weather Data Grid
        self.weather_data_grid = GridLayout(size_hint=(1,None), size=(Window.width, Window.height), row_default_height=15, cols=16)
        #Heading row description
        self.weather_data_grid.add_widget(Label(text='Clouds'))
        self.weather_data_grid.add_widget(Label(text='Cloud Cover Type'))
        self.weather_data_grid.add_widget(Label(text='Icons'))
        self.weather_data_grid.add_widget(Label(text='Precipication %'))
        self.weather_data_grid.add_widget(Label(text='Time'))
        self.weather_data_grid.add_widget(Label(text='Temperature'))
        self.weather_data_grid.add_widget(Label(text='Fells like Temperature'))
        self.weather_data_grid.add_widget(Label(text='Air Pressure'))
        self.weather_data_grid.add_widget(Label(text='Humidity'))
        self.weather_data_grid.add_widget(Label(text='Dew Point'))
        self.weather_data_grid.add_widget(Label(text='UV Index'))
        self.weather_data_grid.add_widget(Label(text='Cloud Coverage %'))
        self.weather_data_grid.add_widget(Label(text='Visibility'))
        self.weather_data_grid.add_widget(Label(text='Wind Speed'))
        self.weather_data_grid.add_widget(Label(text='Wind Direction'))
        self.weather_data_grid.add_widget(Label(text='Wind Gusts'))
        #Row 1
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
        self.weather_data_grid.add_widget(Label(text='test'))
  

#Add Content to Scrollable space
        self.scroll_view_base_layout.add_widget(self.content_scroll_view_top_label)
        self.scroll_view_base_layout.add_widget(self.content_scroll_view_top_png)
        self.scroll_view_base_layout.add_widget(self.weather_data_grid)

#Create scrollview
        self.scrollview = ScrollView(size_hint=(1, None), size=(Window.width, Window.height))
        #add layout to scrollview
        self.scrollview.add_widget(self.scroll_view_base_layout)
    
#Add Widgets to Base Layout
        self.base_layout.add_widget(self.top_bar_layout)
        self.base_layout.add_widget(self.scrollview)      

#Add Base Layout to Window
        self.add_widget(self.base_layout)
        

class SkitouringApp(App):
    def build(self):
        self.screen_manager = ScreenManager()
        
        self.info_page = InfoPage()
        screen = Screen(name="Info")
        screen.add_widget(self.info_page)
        self.screen_manager.add_widget(screen)
        
        return self.screen_manager
    
if __name__ == "__main__":
    Skitour_app = SkitouringApp()
    Skitour_app.run()
    

Edit


It might even have to do with it thinking there is another element to be placed inside the gridlayout. When adding more pdfs underneath, as in the next row, it perfectly starts at the red line shown. Am I blind?

Well I fixed it by removing the inputs in Scrollview from:

self.scrollview = ScrollView(size_hint=(1, None), size=(Window.width, Window.height))

to

self.scrollview = ScrollView()

and by changing:

self.base_layout.add_widget(self.top_bar_layout)
self.base_layout.add_widget(self.scrollview)  

to the following and removing the base layout in general:

 self.add_widget(self.top_bar_layout)
 self.add_widget(self.scrollview)  

I have no clue why that worked, but it did so I will take it....

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM