Kivy教程大全之 用 Python 创建 Instagram类App_kivymd

学习任何框架或工具的最好方法是通过构建一些东西来学习。Kivy 和 kivymd 没有什么不同。您可以使用这些工具使用 Python 编程语言创建 android 应用程序和 IoS 应用程序。在本教程中，我们将通过制作 Instagram 克隆来学习 kivy 和 kivymd。那么让我们开始吧。但在此之前，请确保您已安装 kivy 和 kivymd。如果你使用 PyCharm IDE，你会在底部找到“Python 包”部分，你可以去那里搜索你想要安装的任何包并直接安装它们。
首先在 PyCharm 中创建一个新项目并创建一个.py名为main.py. 这是您的应用程序的入口点，它将分支到其他屏幕和页面。

第 1 部分：KivyMD 的基础知识

让我们开始从我们将使用的 kivymd 库中导入一些东西：

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
1
2

然后我们将创建一个类MainApp，并在括号()中编写MDApp。通过这样做，你告诉 python 我们的类MainApp 扩展了MDApp我们一开始导入的类。

class MainApp(MDApp):
1

当一个类扩展另一个类时，它会继承父类的所有功能。然后我们将在我们的MainApp类中定义一个名为build.

def build(self):
     return MDLabel(text="Testing..1..2..3", halign="center")
1
2

我们MDLabel之前从 kivymd 库导入。MDLabel是一个显示文本的 UI 元素。我们的构建函数返回一个MDLabel带有文本“Testing…1…2…3”的文本，我们将它的水平对齐属性设置halign为居中。最后在你的代码结束时初始化我们的MainApp()类：

MainApp().run()
1

现在运行我们的main.py程序，你应该会看到：

这是可以编写的最基本的 Kivymd 程序。这是整个代码：

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel


class MainApp(MDApp):
    def build(self):
        return MDLabel(text="Testing..1..2..3", halign="center")


MainApp().run()
1
2
3
4
5
6
7
8
9
10

准备好伙计们，我们将把这个 hello-world 程序变成 Instagram。但首先让我们让应用程序的窗口大小更像手机：

在build(self)函数中，将其添加为第一行代码：

Window.size = [300, 600]`
1

但是我们还没有导入Window，所以在你的代码开头添加这个：

from kivy.core.window import Window
1

第 2 部分：设计 Appbar，修改文本、图标按钮和框布局。

home_page.kv在您的项目文件夹中创建一个名为的新文件。home_page.kv我们将使用 kivy 附带的非常简单的类似 css 的语法来编写主页屏幕的 UI 。如您所见，它使事情变得容易得多。
MainApp在类上方添加此代码main.py：

from kivymd.uix.screen import MDScreen
class HomePage(MDScreen):
1
2

我们MDScreen从 kivymd 导入并创建了一个名为HomePage扩展MDScreen我们刚刚导入的类。由于我们的类是空的，它会显示一个错误。只需在类中编写一些字符串以消除错误，如下所示：
现在让我们添加东西到home_page.kv：

<HomePage>:
    MDBoxLayout:
        MDLabel:
            text: 'Instagram'
            halign: 'center'
1
2
3
4
5

文字:告诉kivy，前面的内容属于类HomePage。一切都是 kivy 和 kivymd 中的小部件。我们在一开始使用了一个小部件MDLabel来显示文本。在这里，我们使用另一个称为MDBoxLayout布局或组织屏幕上的元素的小部件。我们将它的填充设置为5dp. dp是一个度量单位，它代表“与设备无关的像素”。
我们在其中MDBoxLayout添加一个MDLabel并设置它的属性，就像我们之前所做的那样。但之前我们使用的是 python，现在我们使用的是更简单的KV 语言。您可以在kivymd 文档中查看所有 kivymd 小部件以及如何使用它们。它非常有用，我们会一直参考它。
让我们在MDLabeland中添加更多属性MDBoxLayout：

< HomePage > : 
    MDBoxLayout: 
        padding: '5dp'adaptive_height 
        : True 

        MDLabel: 
            text: 'Instagram' 
            halign: 'center' 
            valign: 'center' 
            font_size: 25

1
2
3
4
5
6
7
8
9
10
11

我添加了垂直对齐和字体大小。让我们也更改字体大小。转到此此链接并下载Instafont.otf. 在名为的项目文件夹中创建一个新文件夹assets并移入Instafont.otf该目录。我们现在将font-name属性更改为“assets/Instafont.otf”，这是字体文件的地址：

< HomePage > : 
    MDBoxLayout: 
        padding: '5dp'adaptive_height 
        : True 

        MDLabel: 
            text: 'Instagram' 
            halign: 'center' 
            valign: 'center' 
            font_size: 25 
            font_name: 'assets/Instafont.otf'
1
2
3
4
5
6
7
8
9
10
11

可是等等！我们main.py仍然对home_page.kv. 到目前为止，这是我们的代码：

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivy.core.window import Window
from kivymd.uix.screen import MDScreen


class HomePage(MDScreen):
    'Home Page'

class MainApp(MDApp):
    def build(self):
        Window.size = [300, 600]
        return MDLabel(text="Testing..1..2..3", halign="center")


MainApp().run()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

用这个替换return MDLabel…你的build函数的参数：

return HomePage()
1

我们需要加载home_page.kv，所以在上面return HomePage()添加：

Builder.load_file('libs/screens/home_page.kv')
1

并导入Builder：

from kivy.lang import Builder
1

现在您的代码应如下所示：

from kivymd.app import MDApp 
from kivy.core.window import Window 
from kivy.lang import Builder 
from kivymd.uix.screen import MDScreen 


class  HomePage (MDScreen): 
    'Home Page' 


class  MainApp (MDApp): 
    def  build (self): 
        Window.size = [300, 600] 
        Builder.load_file('libs/screens/home_page.kv') 
        return HomePage() 


MainApp().run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

运行您的代码，输出应如下所示：

我们MDLabel的被推倒了！别担心，我们会解决的。让我们在工具栏/appbar 中添加一些图标，编辑您的 home_page.kv：

<HomePage>:
    orientation: 'vertical'
    # App Bar
    MDBoxLayout:
        padding: '5dp'
        adaptive_height: True

        MDIconButton:
            icon: 'plus'

        MDLabel:
            text: 'Instagram'
            halign: 'center'
            valign: 'top'
            font_size: 25
            font_name: 'libs/assets/Instafont.otf'

        MDIconButton:
            icon: 'facebook-messenger'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

我们添加了两个MDIconButton小部件并设置了它们的图标类型。现在，如果您运行程序，您会发现它看起来更好：

我们希望我们的工具栏在屏幕顶部，在我们在其下方添加其他组件后，它会在顶部，所以不用担心。
在我们做任何其他事情之前，让我们将我们的应用栏移动到另一个MDBoxLayout小部件下（我们将添加更多包含故事选项卡和帖子等的框）：

< HomePage > : 
    orientation: 'vertical' 
    MDBoxLayout: 
        orientation: 'vertical' 
        # App Bar
         MDBoxLayout: 
            padding: '5dp'adaptive_height 
            : True 

            MDIconButton: 
                icon: 'plus' 

            MDLabel: 
                text: 'Instagram' 
                halign: 'center' 
                valign: 'top' 
                font_size: 25 
                font_name: 'libs/assets/Instafont.otf' 

            MDIconButton: 
                icon: 'facebook-messenger'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在我们的应用栏下方，我们将添加一个ScrollView，它是 Kivy 中的小部件，允许我们创建可滚动的项目列表：

# Stories
        ScrollView:
1
2

如果您运行该应用程序，现在您可以看到我们的应用程序栏位于它所属的屏幕顶部：

您可以通过kivy编写的非常好的文档了解更多关于ScrollView的信息。我会把剩下的留给你，这是使用 kivymd 用 python 制作的 instagram 克隆的其余代码。继续逐个编写程序 peice，参考 kivy 和 kivymd 文档

项目文件

01kivymd_instagram_clone_ui-main.zip
链接:https://pan.baidu.com/s/1sMpCLqdJFx3XaZj75fewLw 密码:t4l7