Kivy-#1跨平台开发框架


在移动平台的跨平台开发世界中,令人遗憾的是,现在可能有两个框架占主导地位-Xamarin和React Native。 Xamarin-因为它是微软的“收养之子”,并且骄傲地挥舞着拐杖,因此正在积极推广后者。ReactNative是同样出名的Facebook的后代,对于那些厌倦了开发它的程序员,他们的自豪感也丝毫不减。 对于我自己,我早就找到了替代方案,对于那些不熟悉Kivy跨平台开发框架的人,欢迎来到...

什么是好的Kivy? 首先是它不是JavaScript。 这是Python。 因此,开发的速度,代码的简洁性,能够即时更改和跟踪应用程序中的更改的能力,这是一种能力,即当其他人因不成功的尝试而无法完成他们的应用程序或使他们的项目陷入新的困境时,只需编写代码即可。 其次,这是一个99.9%真实的跨平台框架,您可以使用该框架确保编写的代码将启动并在所有可用平台上运行。 供参考:Xamarin仅是可重用代码的60%,尽管开发人员声称有80%。 Kivy是一个成熟的框架,自2011年以来就已开发,并且比其同类的React Native(2015年)和一岁的Xamarin(2011年)要老。

对于今天的文章,我准备了一个小例子,清楚地展示了Kivy的所有上述优点。 我们将使用控制台实用程序CreatorKivyProject创建一个新项目,了解如何在Kivy中为小部件制作动画并构建一个包含以下内容的屏幕:


因此,请下载CreatorKivyProject实用程序并按照README中的说明创建一个新项目。 执行简单命令后,将创建一个带有一个主屏幕和两个其他屏幕“ About”和“ License”的空项目,可以在导航抽屉菜单中打开它们。 这不是用于移动平台的现成应用程序,但是已经可以直接从计算机上的源运行和测试它。 要启动项目,您需要运行main.py脚本,这是应用程序的入口点。


启动后,将显示以下屏幕:


我们的任务是在屏幕上集成四个FloatingActionButton类型的按钮,它们的浮动标签以及按钮事件的最小功能的堆栈。 所谓按钮,是指位于屏幕右下角且彼此重叠的按钮。 由于这样的堆栈可以在多个项目中使用,因此我们将创建一个模块floatactionsbuttons.py,以后可以在任何项目,任何平台上的任何地方使用它。 打开应用程序包和模块所在的libs / applibs目录 ,并使用__init__ . pyfloatactionsbuttons.kv和floatactionsbuttons.py文件创建floatactionsbuttons包:



floatactionsbuttons.kv文件使用特殊的Kv语言描述了UI元素的布局,这比Xamarin中的XAML,Java中的xml或React Native中的JSX标记要简单得多且易于理解。

floatactionsbuttons.py文件控制元素的行为及其逻辑,这在floatactionsbuttons.kv中进行了描述。

这就是带有我们的按钮的堆栈布局看起来如此清晰,并具有容易看到的元素层次结构的结构:

floatactionsbuttons.kv
#: import Window kivy.core.window.Window #: import MDFloatingActionButton kivymd.button.MDFloatingActionButton <FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25) size_hint: None, None size: dp(46), dp(46) elevation: 5 md_bg_color: app.theme_cls.primary_color on_release: self.parent.callback(self) <FloatingLabel>: size_hint: None, None height: dp(20) width: label.texture_size[0] border_color_a: .5 md_bg_color: app.theme_cls.primary_color x: -self.width Label: id: label color: 0, 0, 0, 1 bold: True markup: True text: ' %s ' % root.text <FloatingActionButtons>: FloatingButton: id: f_btn_1 icon: list(root.floating_data.values())[0] FloatingButton: id: f_btn_2 icon: list(root.floating_data.values())[1] FloatingButton: id: f_btn_3 icon: list(root.floating_data.values())[2] FloatingLabel: id: f_lbl_1 text: list(root.floating_data.keys())[0] y: dp(117) FloatingLabel: id: f_lbl_2 text: list(root.floating_data.keys())[1] y: dp(170) FloatingLabel: id: f_lbl_3 text: list(root.floating_data.keys())[2] y: dp(226) MDFloatingActionButton: icon: root.icon size: dp(56), dp(56) x: Window.width - (self.width + dp(15)) md_bg_color: app.theme_cls.primary_color y: dp(15) on_release: root.show_floating_buttons() 


让我们看看堆栈中的哪些元素对应于标记。 我们创建了一个与每个按钮相对应的签名:


将在堆栈中的按钮:


主按钮,固定在屏幕的右下角:



并将其全部放置在屏幕上,向签名指示屏幕左侧的位置(不可见),以及所有按钮的位置-右下角的位置:


我们只是重叠按钮。 现在是恢复它们的时候了。 开启档案

floatactionsbuttons.py
 import os from kivy.animation import Animation from kivy.lang import Builder from kivy.core.window import Window from kivy.uix.floatlayout import FloatLayout from kivy.logger import PY2 from kivy.lang import Builder from kivy.properties import StringProperty, DictProperty, ObjectProperty from kivy.metrics import dp from kivymd.card import MDCard kv_file = os.path.splitext(__file__)[0] + '.kv' if PY2: Builder.load_file(kv_file) else: with open(kv_file, encoding='utf-8') as kv: Builder.load_string(kv.read()) class FloatingLabel(MDCard): text = StringProperty() class FloatingActionButtons(FloatLayout): icon = StringProperty('checkbox-blank-circle') callback = ObjectProperty(lambda x: None) floating_data = DictProperty() show = False def __init__(self, **kwargs): super(FloatingActionButtons, self).__init__(**kwargs) self.lbl_list = [self.ids.f_lbl_1, self.ids.f_lbl_2, self.ids.f_lbl_3] self.btn_list = [self.ids.f_btn_1, self.ids.f_btn_2, self.ids.f_btn_3] def show_floating_buttons(self): step = dp(46) for btn in self.btn_list: step += dp(56) Animation(y=step, d=.5, t='out_elastic').start(btn) self.show = True if not self.show else False self.show_floating_labels() if self.show \ else self.hide_floating_labels() def show_floating_labels(self): i = 0 for lbl in self.lbl_list: i += .5 pos_x = Window.width - (lbl.width + dp(46 + 21 * 1.5)) Animation(x=pos_x, d=i, t='out_elastic').start(lbl) def hide_floating_buttons(self): for btn in self.btn_list: Animation(y=25, d=.5, t='in_elastic').start(btn) def hide_floating_labels(self): i = 1 for lbl in self.lbl_list: i -= .3 Animation(x=-lbl.width, d=i, t='out_elastic').start(lbl) self.hide_floating_buttons() 


Kivy使用Animation类创建动画。 与Java中一样,只需传递最终值即可指定我们要设置动画的元素的参数。 例如,请注意,kv布局中按钮的高度设置为25,即距屏幕底部25个像素:

 <FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25) #     y 

由于我们有三个按钮,因此在循环中,我们指示必须升高的每个高度(参数“ y” ),并传递负责动画类型的函数名称( “ out_elastic” )(在我们的项目中,我使用了弹性弹簧动画) ,其他所有操作都会自动完成:

  def show_floating_buttons(self): '''         .     Puthon/C++/Php. ''' step = dp(46) for btn in self.btn_list: step += dp(56) Animation(y=step, d=.5, t='out_elastic').start(btn) 

签名的动画完全相同,除了在Animation中,我们将值传递给x参数-元素的水平位置:

  def show_floating_labels(self): '''         .     Puthon/C++/Php. ''' i = 0 #      for lbl in self.lbl_list: i += .5 pos_x = Window.width - (lbl.width + dp(46 + 21 * 1.5)) Animation(x=pos_x, d=i, t='out_elastic').start(lbl) 

包装已准备就绪。 如何将其添加到我们的单个屏幕? 打开主屏幕控制文件AnimatedButtons / libs / uix / baseclass / basescreen.py



...导入我们创建的包并将其添加到屏幕:

 from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): '''  .''' def on_enter(self): '''    .''' #      . self.add_widget(FloatingActionButtons( icon='lead-pencil', floating_data={ 'Python': 'language-python', 'Php': 'language-php', 'C++': 'language-cpp'}, callback=self.set_my_language)) 

如您所见,一切都是简单,透明和快速的。 考虑到作者实现本文中 “ Hello World”之类的应用程序需要花费多少代码,我不敢想象这种功能的实现将看起来像React Native。 在Kivy旁边,我只能放Xamarin,它在构建软件包时将Mono和其他库与它一起拉,就像Kivy拉Python解释器一样。 Kivy和Xamarin上的现成应用程序具有相同的大小和近似的启动速度,但是Xamarin目前存在更多问题,因此我可以自信地说,今天Kivy是排名第一的跨平台开发框架!

您可以在GitHub上下载项目的源代码。

Kivy应用示例:

vimeo.com/29348760
vimeo.com/206290310
vimeo.com/25680681
www.youtube.com/watch?v=u4NRu7mBXtA
www.youtube.com/watch?v=9rk9OQLSoJw
www.youtube.com/watch?v=aa9LXpg_gd0
www.youtube.com/watch?v=FhRXAD8-UkE
www.youtube.com/watch?v=GJ3f88ebDqc&t=111s
www.youtube.com/watch?v=D_M1I9GvpYs
www.youtube.com/watch?v=VotPQafL7Nw
youtu.be/-gfwyi7TgLI

play.google.com/store/apps/details?id=org.kognitivo.kognitivo
play.google.com/store/apps/details?id=net.inclem.pyonic解释器
play.google.com/store/apps/details?id=com.madhattersoft.guessthequote
play.google.com/store/apps/details?id=com.prog.ders.ceyhan
play.google.com/store/apps/details?id=com.heattheatr.quotessaints

Source: https://habr.com/ru/post/zh-CN418839/


All Articles