如何扩展Kivymd应用
我是Kivy的新手,不确定如何缩放屏幕,以便如果在手机上查看或不在全屏幕中查看,则应用程序会缩小到正确的查看尺寸。
我添加了全屏中该应用程序当前外观的屏幕截图,然后将其制造较小时会发生什么。
任何帮助将不胜感激。
谢谢:)
from kivy import Config
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivy.uix.image import Image
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivymd.theming import ThemableBehavior
from kivymd.uix.navigationdrawer import MDNavigationLayout, MDNavigationDrawer
from kivymd.uix.list import MDList, OneLineAvatarListItem, ILeftBody
from kivy.properties import ObjectProperty
from kivy.uix.widget import Widget
Config.set('input', 'mouse', 'mouse,disable_multitouch')
class DrawerList(ThemableBehavior, MDList, Screen):
pass
class NavLayout(MDNavigationLayout):
pass
class Login(Screen):
nav_drawer = ObjectProperty()
class Nav(Screen):
Login = ObjectProperty()
ScreenManager = ObjectProperty
class Homepage(Screen):
Login = ObjectProperty()
nav_drawer = ObjectProperty()
class AddNewCustomer(Screen):
nav_drawer = ObjectProperty()
class AddNewStaff(Screen):
pass
class ScreenManager(ScreenManager):
Login = ObjectProperty()
class ContentNavigationDrawer(BoxLayout):
pass
class MainApp(MDApp):
def build(self):
# Window.maximize()
# self.theme_cls.theme_style = "Light"
# self.theme_cls.primary_hue = "900"
login = Builder.load_file("login.kv")
return login
if __name__ == "__main__":
MainApp().run()
ScreenManager:
Login:
Homepage:
AddNewCustomer:
Nav:
DrawerList:
<Login>:
name: "login"
MDCard:
size_hint: None, None
size: 700, 800
pos_hint: {"center_x": 0.5, "center_y": 0.5}
elevation: 10
padding: 25
spacing: 25
orientation: 'vertical'
Image:
source: 'images/asteria.png'
size: 100, 200
MDLabel:
id: login
font_size: 40
halign: 'center'
size_hint_y: None
height: self.texture_size[1]
padding_y: 15
MDTextFieldRound:
id: user
hint_text: "username"
icon_right: "account"
size_hint_x: None
width: 200
font_size: 18
pos_hint: {"center_x": 0.5}
MDTextFieldRound:
id: password
hint_text: "password"
icon_right: "eye-off"
size_hint_x: None
width: 200
font_size: 18
pos_hint: {"center_x": 0.5}
password: True
MDRoundFlatButton:
text: "LOGIN"
font_size: 12
pos_hint: {"center_x": 0.5}
on_release:
root.manager.current = "homepage"
root.manager.transition.direction = "left"
MDRoundFlatButton:
text: "CLEAR"
font_size: 12
pos_hint: {"center_x": 0.5}
on_press: app.clear()
Widget:
size_hint_y: None
height: 50
<Nav>:
ScrollView:
MDList:
OneLineListItem:
text: "Add New Customer"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "addNewCustomer"
root.screen_manager.transition.direction = "right"
OneLineListItem:
text: "Add New Staff"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "addNewStaff"
OneLineListItem:
text: "Case List"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "caseList"
OneLineListItem:
text: "Create Case"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.transition.direction = "left"
root.screen_manager.current = "Create Case"
OneLineListItem:
text: "Log Out"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.manager.current = "login"
root.manager.transition.direction = "right"
<Homepage>:
name: "homepage"
Screen:
MDNavigationLayout:
ScreenManager:
id: screen_manager
Screen:
name: "Homepage"
MDLabel:
text: "Welcome Home"
halign: "center"
Screen:
name: "addNewCustomer"
MDLabel:
text: "Add New customer"
halign: "center"
Screen:
name: "addNewStaff"
MDLabel:
text: "Add New Staff"
halign: "center"
Screen:
name: "caseList"
MDLabel:
text: "Case List"
halign: "center"
Screen:
name: "casePool"
MDLabel:
text: "Case Pool"
halign: "center"
Screen:
name: "Create Case"
MDLabel:
text: "Case Title"
font_size: 15
size_hint_x: None
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.875, "center_x": 0.115}
MDTextFieldRound:
id: CaseTitle
hint_text: "Info Here"
icon_right: "Case Title"
size_hint_x: None
width: 275
font_size: 15
pos_hint: {"top": 0.863, "center_x": 0.155}
MDLabel:
text: "Customer"
font_size: 15
size_hint_x: None
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.791, "center_x": 0.115}
MDTextFieldRound:
id: Customer
hint_text: "Info Here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 275
font_size: 14
pos_hint: {"top": 0.779, "center_x": 0.155}
MDLabel:
text: "Customer Forename"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.707, "center_x": 0.115}
MDTextFieldRound:
id: Customer Forename
hint_text: "Info here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 137.5
font_size: 14
pos_hint: {"top": 0.687, "center_x": 0.121}
MDLabel:
text: "Customer Surname"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.707, "center_x": 0.210}
MDTextFieldRound:
id: Customer Forename
hint_text: "Info Here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 137.5
font_size: 14
pos_hint: {"top": 0.687, "center_x": 0.210}
MDLabel:
text: "Alternative email"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.620, "center_x": 0.115}
MDTextFieldRound:
id: Alternative email
hint_text: "Info Here"
mode:"rectangle"
size_hint_x: None
width: 275
font_size: 15
pos_hint: {"top": 0.600, "center_x": 0.155}
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: 'Navigation'
left_action_items: [['menu', lambda x: nav_drawer.set_state('open')]]
right_action_items: [["images/asteria.png", lambda x: None]]
elevation:5
Widget:
MDNavigationDrawer:
id: nav_drawer
Nav:
screen_manager: screen_manager
nav_drawer: nav_drawer
manager: root.manager
I am new to Kivy and unsure of how to scale the screen so that if being viewed on a mobile phone or not in full screen, the application scales down to the correct viewing size.
I have added screenshots of what the application currently looks like in full screen and then what happens when it is made smaller.
Any help would be hugely appreciated.
Thanks:)
from kivy import Config
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivy.uix.image import Image
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivymd.theming import ThemableBehavior
from kivymd.uix.navigationdrawer import MDNavigationLayout, MDNavigationDrawer
from kivymd.uix.list import MDList, OneLineAvatarListItem, ILeftBody
from kivy.properties import ObjectProperty
from kivy.uix.widget import Widget
Config.set('input', 'mouse', 'mouse,disable_multitouch')
class DrawerList(ThemableBehavior, MDList, Screen):
pass
class NavLayout(MDNavigationLayout):
pass
class Login(Screen):
nav_drawer = ObjectProperty()
class Nav(Screen):
Login = ObjectProperty()
ScreenManager = ObjectProperty
class Homepage(Screen):
Login = ObjectProperty()
nav_drawer = ObjectProperty()
class AddNewCustomer(Screen):
nav_drawer = ObjectProperty()
class AddNewStaff(Screen):
pass
class ScreenManager(ScreenManager):
Login = ObjectProperty()
class ContentNavigationDrawer(BoxLayout):
pass
class MainApp(MDApp):
def build(self):
# Window.maximize()
# self.theme_cls.theme_style = "Light"
# self.theme_cls.primary_hue = "900"
login = Builder.load_file("login.kv")
return login
if __name__ == "__main__":
MainApp().run()
ScreenManager:
Login:
Homepage:
AddNewCustomer:
Nav:
DrawerList:
<Login>:
name: "login"
MDCard:
size_hint: None, None
size: 700, 800
pos_hint: {"center_x": 0.5, "center_y": 0.5}
elevation: 10
padding: 25
spacing: 25
orientation: 'vertical'
Image:
source: 'images/asteria.png'
size: 100, 200
MDLabel:
id: login
font_size: 40
halign: 'center'
size_hint_y: None
height: self.texture_size[1]
padding_y: 15
MDTextFieldRound:
id: user
hint_text: "username"
icon_right: "account"
size_hint_x: None
width: 200
font_size: 18
pos_hint: {"center_x": 0.5}
MDTextFieldRound:
id: password
hint_text: "password"
icon_right: "eye-off"
size_hint_x: None
width: 200
font_size: 18
pos_hint: {"center_x": 0.5}
password: True
MDRoundFlatButton:
text: "LOGIN"
font_size: 12
pos_hint: {"center_x": 0.5}
on_release:
root.manager.current = "homepage"
root.manager.transition.direction = "left"
MDRoundFlatButton:
text: "CLEAR"
font_size: 12
pos_hint: {"center_x": 0.5}
on_press: app.clear()
Widget:
size_hint_y: None
height: 50
<Nav>:
ScrollView:
MDList:
OneLineListItem:
text: "Add New Customer"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "addNewCustomer"
root.screen_manager.transition.direction = "right"
OneLineListItem:
text: "Add New Staff"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "addNewStaff"
OneLineListItem:
text: "Case List"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.current = "caseList"
OneLineListItem:
text: "Create Case"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.screen_manager.transition.direction = "left"
root.screen_manager.current = "Create Case"
OneLineListItem:
text: "Log Out"
font_size: 15
halign: "center"
on_release:
root.nav_drawer.set_state("close")
root.manager.current = "login"
root.manager.transition.direction = "right"
<Homepage>:
name: "homepage"
Screen:
MDNavigationLayout:
ScreenManager:
id: screen_manager
Screen:
name: "Homepage"
MDLabel:
text: "Welcome Home"
halign: "center"
Screen:
name: "addNewCustomer"
MDLabel:
text: "Add New customer"
halign: "center"
Screen:
name: "addNewStaff"
MDLabel:
text: "Add New Staff"
halign: "center"
Screen:
name: "caseList"
MDLabel:
text: "Case List"
halign: "center"
Screen:
name: "casePool"
MDLabel:
text: "Case Pool"
halign: "center"
Screen:
name: "Create Case"
MDLabel:
text: "Case Title"
font_size: 15
size_hint_x: None
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.875, "center_x": 0.115}
MDTextFieldRound:
id: CaseTitle
hint_text: "Info Here"
icon_right: "Case Title"
size_hint_x: None
width: 275
font_size: 15
pos_hint: {"top": 0.863, "center_x": 0.155}
MDLabel:
text: "Customer"
font_size: 15
size_hint_x: None
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.791, "center_x": 0.115}
MDTextFieldRound:
id: Customer
hint_text: "Info Here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 275
font_size: 14
pos_hint: {"top": 0.779, "center_x": 0.155}
MDLabel:
text: "Customer Forename"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.707, "center_x": 0.115}
MDTextFieldRound:
id: Customer Forename
hint_text: "Info here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 137.5
font_size: 14
pos_hint: {"top": 0.687, "center_x": 0.121}
MDLabel:
text: "Customer Surname"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.707, "center_x": 0.210}
MDTextFieldRound:
id: Customer Forename
hint_text: "Info Here"
mode:"rectangle"
icon_right: "Customer"
size_hint_x: None
width: 137.5
font_size: 14
pos_hint: {"top": 0.687, "center_x": 0.210}
MDLabel:
text: "Alternative email"
font_size: 15
size_hint_x: None
multiline: False
bold: True
color: 0.204, 0.204, 0.204, 1
pos_hint: {"center_y": 0.620, "center_x": 0.115}
MDTextFieldRound:
id: Alternative email
hint_text: "Info Here"
mode:"rectangle"
size_hint_x: None
width: 275
font_size: 15
pos_hint: {"top": 0.600, "center_x": 0.155}
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: 'Navigation'
left_action_items: [['menu', lambda x: nav_drawer.set_state('open')]]
right_action_items: [["images/asteria.png", lambda x: None]]
elevation:5
Widget:
MDNavigationDrawer:
id: nav_drawer
Nav:
screen_manager: screen_manager
nav_drawer: nav_drawer
manager: root.manager
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这是因为小部件的X位置已经很低(小部件已经在左边)。只需增加此值,它应该看起来更好:
屏幕宽度全宽:


屏幕以1/2宽度:
您可以用
pos_hint
弄乱,以使其看起来有些整洁。This is because the widgets' x position is already low (the widgets are already to the left). Just increase this value and it should look better:
Screen at full width:


Screen at 1/2 width:
You can mess around with the
pos_hint
to make it look a bit neater.