J'essaie de créer une mise en page dans Kivy / KivyMD qui est réactif, centré et défilable. Jusqu'à présent, j'ai développé deux mises en page, une personne qui se concentre sur une boîte à flotteur et qui peut être magnifiquement redimensionnée, mais cela ne fait pas défiler. J'ai également développé une mise en page qui est une gridlayout dans une vision de défilement, il redimensionnement joliment, mais à de grandes tailles de fenêtre, elle ne centriste pas correctement la gridlayout correctement.
J'ai essayé de mettre un boxlayout dans un flotteur dans une vision de Scrollay, il Redimensionnement magnifiquement mais la barre de défilement ne fonctionne pas. P>
Je n'ai pas été incapable de combiner la mise en page centrée sur la redimensionnement dans une envoi correctement de travail. Comment devrais-je accomplir cela? P>
Voici mon exemple de ScrollView: P>
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.uix.scrollview import ScrollView
from kivy.uix.floatlayout import FloatLayout
LIPSUM = """Very long lipsum..."""
Builder.load_string("""
<ExampleCenter@FloatLayout>:
BoxLayout:
orientation: 'vertical'
# Gives the BoxLayout a max and min width that is responsive
size_hint_x: .75
size_hint_max_x: dp(800)
size_hint_min_x: min(dp(400), root.width)
# Centers the BoxLayout horizontally responsively
pos_hint: {'center_x': .5}
padding: 0, dp(16), 0, 0
MDLabel:
text: app.label_text + app.label_text
halign: 'justify'
padding: dp(16), dp(16)
markup: True
font_style: 'Body1'
theme_text_color: 'Primary'
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: app.label_text + app.label_text
halign: 'justify'
padding: dp(16), dp(16)
markup: True
font_style: 'Body1'
theme_text_color: 'Primary'
size_hint_y: None
height: self.texture_size[1]
Widget
""")
class ExampleCenter(FloatLayout):
pass
class Example(MDApp):
title = "Dialogs"
label_text = LIPSUM
def build(self):
return ExampleCenter()
Example().run()
3 Réponses :
Le problème est que vous essayez d'utiliser et créer le pos_hint code> dans un enfant d'un ScrollView code> (qui n'honore pas cette propriété). Ainsi, plutôt que d'essayer de centrer l'enfant du ScrollView code>, centrez le ScrollView code> lui-même. Cela signifie que le ScrollView code> doit être placé dans une mise en page code> code>. Donc, si vous utilisez floatlayout code>, vous pouvez faire quelque chose comme: examplefl code> classe: p> class ExampleFL(FloatLayout):
pass
Après avoir appliqué vos modifications, Taille_hint_x: .75 , Taille_hint_max_x: DP (800) , Taille_hint_min_x: Min (DP (400), root.Width) Ne fonctionne plus dans la gridlayout et ne manque pas de magnifiques redimensionnements de la mise en page.
Vous essayez à nouveau d'utiliser indicateurs dans l'enfant d'un ScrollView , qui n'honore pas de telles propriétés. Vous pouvez appliquer de telles astuces au ScrollView elle-même (car ils sont traités par le floatlayout ). Vous pouvez également utiliser ze_hint pour les enfants du gridlayout (mais pas pos_hint ), car à nouveau, ils sont géré par le Gridlayout .
Je ne peux pas atteindre mes résultats souhaités de cette façon. Je vais mettre en œuvre le centrage dans ScrollView Programmatiquement.
Mise en œuvre programmatique de la vue de centrage dans ScrollView manipulant le rembourrage. Cela me donne les résultats souhaités.
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.metrics import dp
from kivy.properties import NumericProperty
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
LIPSUM = """Very long lipsum..."""
Builder.load_string("""
<ExampleScroll@FloatLayout>:
ScrollView:
do_scroll_x: False
bar_width: 10
bar_color: app.theme_cls.primary_color
bar_color_acrive: app.theme_cls.accent_color
effect_cls: "DampedScrollEffect"
scroll_type: ['bars']
ScrollCenterLayout:
cols: 1
rel_max: dp(800)
rel_min: dp(400)
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
MDLabel:
text: app.label_text + app.label_text
halign: 'justify'
padding: dp(16), dp(16)
markup: True
font_style: 'Body1'
theme_text_color: 'Primary'
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: app.label_text + app.label_text
halign: 'justify'
padding: dp(16), dp(16)
markup: True
font_style: 'Body1'
theme_text_color: 'Primary'
size_hint_y: None
height: self.texture_size[1]
Widget
""")
class ScrollCenterLayout(GridLayout):
rel_max = NumericProperty(dp(800))
rel_min = NumericProperty(dp(400))
def __init__(self, **kwargs):
super(ScrollCenterLayout, self).__init__(**kwargs)
self.rel_max = kwargs.get('rel_max', dp(800))
self.rel_min = kwargs.get('rel_min', dp(400))
def on_width(self, instance, value):
if self.rel_max < value:
padding = max(value * .125, (value - self.rel_max) / 2)
elif self.rel_min < value:
padding = min(value * .125, (value - self.rel_min) / 2)
elif self.rel_min < value:
padding = (value - self.rel_min) / 2
else:
padding = 0
self.padding[0] = self.padding[2] = padding
class ExampleScroll(FloatLayout):
pass
class Example(MDApp):
label_text = LIPSUM
def build(self):
self.theme_cls.primary_palette = "LightGreen"
self.theme_cls.accent_palette = "Green"
self.theme_cls.theme_style = "Dark"
return ExampleScroll()
Example().run()
Ce que vous avez à faire est d'abord, créez une vision de ScrollView, si possible, vous pouvez utiliser, Recycletview afin que vous puissiez faciliter l'ajout de widget en tant que classes définies comme widgets:
Exemple: P>
app.root.ids.scrollview_id_of_your_widget.data.append({"viewclass": "Thing1", })