Kivy.garden.NavigationDrawer 后续学习

如百词斩部分代码

MRWord\pages\infopage\info.kv

<InfoPage>:
    anim_type: 'slide_above_simple'
    id: main_win
    box_button_anchor: box_button_anchor.__self__
    three_labels_box: three_labels_box.__self__
    box_phonetic: box_phonetic.__self__

    BoxLayout:

    BoxLayout:
        id: main_box
        orientation: 'vertical'
        spacing: 20
        canvas.before:
            Color:
                rgba: (1,1,1,1)
            Rectangle:
                pos: self.pos
                size: self.size
                source: 'image/back.jpg'

        BoxLayout:
            orientation: 'vertical'
            id: word_phonetic_box
            Label:
                id: word_to_study
                font_size: '50sp'
                color: 1, 0, 0, 1
            BoxLayout:
                orientation: "horizontal"
                id: box_phonetic
                spacing: 8

                AnchorLayout:     # 右上角布局的  小喇叭   按钮
                    anchor_x: 'right'
                    anchor_y: 'top'
                    ImageButton:

                        id: phonetic_image
                        source: "image/play_button.png"
                        size_hint: None, None
                        size: 50, 22
                        on_press: root.play_word()

                AnchorLayout:      # 左上角  音标
                    anchor_x: "left"
                    anchor_y: "top"
                    Label:
                        id: phonetic
                        font_name: "site_packages/DejaVuSans.ttf"
                        size_hint: None, None
                        size: 30, 22
                        color: 0, 0, 0, 1
        BoxLayout:
            id: three_labels_box
            orientation: 'vertical'
            Label:
                id: explain_word
                font_name: "site_packages/DroidSansFallback.ttf"
                color: 0, 0, 0, 1
            Label:
                id: examples_en
                font_name: "site_packages/DroidSansFallback.ttf"
                color: 0, 0, 0, 1
            Label:
                id: examples_cn
                font_name: "site_packages/DroidSansFallback.ttf"
                color: 0, 0, 0, 1

        BoxLayout:
            orientation:"horizontal"
            id: box_button_anchor
            AnchorLayout:
                anchor_x: "left"
                anchor_y: "bottom"
                Button:
                    text:"\u8ba4\u8bc6"  # 认识
                    size_hint: .8, .2
                    font_name: "site_packages/DroidSansFallback.ttf"
                    background_normal: ''
                    background_color: (0.035,0.588,0.941,1)
                    on_press: root.know_button_press()
            AnchorLayout:
                anchor_x: "center"
                anchor_y: "bottom"
                Button:
                    text:"\u6a21\u7cca"   # 模糊
                    size_hint: .8, .2
                    font_name: "site_packages/DroidSansFallback.ttf"
                    background_normal: ''
                    background_color: (1,.494,0,1)
                    on_press: root.indistinct_button_press()
            AnchorLayout:
                anchor_x: "right"
                anchor_y: "bottom"
                Button:
                    text:"\u4e0d\u8ba4\u8bc6"   # 不认识
                    size_hint: .8, .2
                    font_name: "site_packages/DroidSansFallback.ttf"
                    background_normal: ''
                    background_color: (0.988,0.509,0.509,1)
                    on_press: root.unknown_button_press()
搞不懂这三串儿代码的作用

box_button_anchor: box_button_anchor.__self__
three_labels_box: three_labels_box.__self__
box_phonetic: box_phonetic.__self__

将此三串儿代码删除后,程序运行到该页面报错崩溃。

思维拓展1:

在您提供的代码片段中,您似乎正在访问某种对象(可能是界面元素或自定义组件)的 __self__ 属性。这种模式在特定的编程环境或框架中可能很常见,但并非所有编程语言或框架都内置了 __self__ 这样的属性。不过,基于常见的上下文,我可以提供一些推测的解释。

  1. 自定义组件或对象:在某些框架或库中,__self__ 可能是一个约定俗成的属性,用于引用组件或对象的“原始”或“基础”实例。这可能是因为组件或对象被包装或扩展了额外的功能,而 __self__ 用于直接访问这些扩展之前的原始实例。
  2. 引用DOM元素:在Web开发中,特别是使用像React这样的库时,组件可能不仅包含状态和逻辑,还包含对DOM元素的引用。__self__ 可能是一个指向与该组件关联的DOM元素的引用。但请注意,React等现代框架通常不使用 __self__ 这样的命名约定,而是使用 ref 或其他机制来引用DOM元素。
  3. 框架或库的内部机制:在某些情况下,__self__ 可能是特定框架或库的内部机制的一部分,用于实现某些高级功能或优化。开发者可能不需要直接与其交互,但了解其存在和用途可能有助于更好地理解框架或库的工作原理。
  4. 错误或误解:最后,也有可能是这段代码是基于某种特定的上下文或框架编写的,而您可能不完全理解这个上下文或框架。在这种情况下,最好查阅相关文档或源代码以获取更多信息。

针对您提供的具体代码片段:

  • box_button_anchor: box_button_anchor.__self__:这行代码似乎正在将 box_button_anchor 的 __self__ 属性赋值给 box_button_anchor 本身。这通常没有实际意义,除非 box_button_anchor 在此之前被定义为一个具有 __self__ 属性的对象,并且您想要用该属性替换原始对象。
  • three_labels_box: three_labels_box.__self__ 和 box_phonetic: box_phonetic.__self__:这两行代码与上一行类似,但针对的是不同的对象。

总之,要了解这些代码的确切作用和意义,您需要查阅与这些代码相关的文档、源代码或上下文信息。

个人总结: 这self 可能就是一种类似global概念

设置side panel 和main panel 以及如何实现不同效果的隐藏和展示?

Kivy是一个使用Python编写的跨平台GUI开发框架,而garden则是Kivy社区开发的一个插件库,包含了大量的Kivy组件和工具。其中,NavigationDrawer是一种可以在应用程序中实现侧边栏导航的组件。

要使用NavigationDrawer,首先需要导入它:

from kivy.garden.navigationdrawer import NavigationDrawer

在创建NavigationDrawer对象时,可以通过设置NavigationDrawer类的side_panelmain_panel属性来分别指定侧边栏和主面板的内容。例如:

from kivy.uix.label import Label

drawer = NavigationDrawer()
drawer.side_panel = Label(text="Side panel")
drawer.main_panel = Label(text="Main panel")

默认情况下,侧边栏在左侧,但也可以通过设置side属性为'right'来将其放置在右侧:

drawer.side = 'right'

要实现不同效果的隐藏和展示,可以使用NavigationDrawer的toggle()方法来切换侧边栏的显示状态。例如,下面的代码将在按钮点击时切换侧边栏的显示状态:

from kivy.uix.button import Button

button = Button(text="Toggle side panel")
button.bind(on_press=lambda x: drawer.toggle())

MRWord\pages\infopage\info.kv

def read_random_word(self):
    def read_random_word(self):
        """随机读取一条数据"""
        sql = "SELECT * FROM word WHERE id = (SELECT word_id FROM today ORDER BY RANDOM() limit 1)"
        rows = select_data(sql)
        if len(rows) == 0:
            # 先清除所有widgets
            pass
        else:
            # 清除存在的三个按钮和标签
            self.ids.main_box.clear_widgets(children=[self.ids.three_labels_box, self.ids.box_button_anchor])
            # 绑定点击任意位置执行方法
            self.ids.main_box.bind(on_touch_down=self.anywhere_touch_down)
            self.ids.word_to_study.text = rows[0][1]
            self.ids.phonetic.text = rows[0][3]

请详细解析 self.ids.main_box.clear_widgets(children=[self.ids.three_labels_box, self.ids.box_button_anchor]) # 绑定点击任意位置执行方法 以及其中children是什么

这是一个Python代码段,它使用了Kivy框架的语法。这段代码的作用是清除名为"main_box"的布局中的所有子部件,并将其需要清楚的部分替换设置为"three_labels_box"和"box_button_anchor"这两个部件。其中,"children"是指要从布局中删除的子部件列表。

另外,这里使用了Kivy中的"bind"方法,将点击任意位置时执行的方法与布局绑定起来。这个方法没有在代码中给出,但一般情况下,它会用来更新界面或执行一些其他的逻辑操作。

clar_widgetse
 def clear_widgets(self, children=None):
        '''
        Remove all (or the specified) :attr:`~Widget.children` of this widget.
        If the 'children' argument is specified, it should be a list (or
        filtered list) of children of the current widget.

        .. versionchanged:: 1.8.0
            The `children` argument can be used to specify the children you
            want to remove.
        清除这个所有(或者部分)属性:widget.children
        如果 这children 没被详细说明,它应该是一个当前组件的子类的列表(或者被过滤后的列表)
        
        
        children 可以被用来删除你想要的。
        '''

        if not children:
            children = self.children
        remove_widget = self.remove_widget
        for child in children[:]:
            remove_widget(child)

kivy中garden的NavigationDrawer 如何设置side panel 和main panel 以及如何通过add_widget实现不同效果的隐藏和展示

Kivy中的garden是一个开源的插件库,其中包含了许多有用的组件和工具,NavigationDrawer就是其中之一,它是一个可用于创建侧边栏菜单的控件。通过NavigationDrawer,您可以轻松地创建具有抽屉式导航菜单的应用程序。

要设置NavigationDrawer的side panel 和main panel,需要使用NavigationDrawer类中的相关属性。具体而言,您需要为side panel和main panel指定布局,然后将它们添加到NavigationDrawer中。以下是一个示例代码:

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.garden.navigationdrawer import NavigationDrawer

class MyApp(BoxLayout):
    def __init__(self, **kwargs):
        super(MyApp, self).__init__(**kwargs)

        # 创建侧边栏布局
        side_panel = BoxLayout(orientation='vertical')
        side_panel.add_widget(Label(text='这是侧边栏'))

        # 创建主要布局
        main_panel = BoxLayout(orientation='vertical')
        main_panel.add_widget(Label(text='这是主要面板'))

        # 创建导航菜单
        nav_drawer = NavigationDrawer()
        nav_drawer.add_widget(side_panel)
        nav_drawer.add_widget(main_panel)

        # 将导航菜单添加到应用程序中
        self.add_widget(nav_drawer)

if __name__ == '__main__':
    MyApp().run()

在上面的代码中,我们首先创建了一个侧边栏布局和一个主要布局,然后将它们添加到NavigationDrawer中。然后,我们将NavigationDrawer添加到应用程序中。

要实现不同效果的隐藏和展示,您可以使用NavigationDrawer类中的open()和close()方法。例如,如果您想在应用程序启动时自动打开侧边栏,则可以在MyApp类的__init__()方法中添加以下代码:

class MyApp(BoxLayout):
    def __init__(self, **kwargs):
        super(MyApp, self).__init__(**kwargs)

        # 创建侧边栏布局
        side_panel = BoxLayout(orientation='vertical')
        side_panel.add_widget(Label(text='这是侧边栏'))

        # 创建主要布局
        main_panel = BoxLayout(orientation='vertical')
        main_panel.add_widget(Label(text='这是主要面板'))

        # 创建导航菜单
        nav_drawer = NavigationDrawer()
        nav_drawer.add_widget(side_panel)
        nav_drawer.add_widget(main_panel)

        # 打开导航菜单
        nav_drawer.open()

        # 将导航菜单添加到应用程序中
        self.add_widget(nav_drawer)

在上面的代码中,我们在创建NavigationDrawer后立即调用了open()方法,以打开侧边栏。

kivy 的 NavigationDrawer 中如何区分和定义side_panel 和main_panel

在Kivy的NavigationDrawer中,side_panel和main_panel是两个不同的组件。side_panel是位于导航抽屉左侧的面板,通常用于显示菜单或其他导航控件。main_panel则是位于右侧的主要内容面板,用于显示应用程序的主要内容。

在定义NavigationDrawer时,可以使用如下代码来定义side_panel和main_panel:

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.screenmanager import Screen

class MyNavigationDrawer(BoxLayout):
    def __init__(self, **kwargs):
        super(MyNavigationDrawer, self).__init__(**kwargs)

        # Define the side panel
        side_panel = BoxLayout(orientation='vertical')
        side_panel.add_widget(Label(text='Side panel content'))

        # Define the main panel
        main_panel = Screen(name='main')
        main_panel.add_widget(Label(text='Main panel content'))

        # Add the panels to the NavigationDrawer
        self.add_widget(side_panel)
        self.add_widget(main_panel)

在上面的代码中,我们首先创建了一个BoxLayout作为NavigationDrawer的基础布局。然后,我们定义了一个side_panel和一个main_panel,并将它们添加到了NavigationDrawer中。

请注意,我们将main_panel包装在Screen中。这是因为NavigationDrawer需要通过ScreenManager来管理不同的屏幕。因此,在实际应用中,您可能需要使用ScreenManager来管理多个屏幕,并将它们添加到main_panel中。

书上简述这算段代码缘由

在info.kv文件中,在页面顶部绑定下拉刷新事件,由于反复添加清除页面内的控件,所以还需在顶部添加如下代码:

box_button_anchor: box_button_anchor.__self__
three_labels_box: three_labels_box.__self__
box_phonetic: box_phonetic.__self__

 kivy 中kv文件中 使用NavigationDreawer来实现主页面和导航栏切换的效果。

在kivy中,可以使用NavigationDrawer来实现主页面和导航栏切换的效果。NavigationDrawer是一个滑动菜单,可以在左边或右边滑出,显示出应用程序的导航选项。

首先,在kv文件中,需要定义一个NavigationDrawer,并设置其属性,例如:

NavigationDrawer:
    id: nav_drawer

    BoxLayout:
        orientation: 'vertical'

        Label:
            text: 'Navigation Drawer'

        Button:
            text: 'Main Page'
            on_release: root.show_main_page()

        Button:
            text: 'Other Page'
            on_release: root.show_other_page()

在上面的代码中,我们定义了一个名为nav_drawer的NavigationDrawer,其中包含一个垂直方向的BoxLayout,包含一个标签和两个按钮。这些按钮将用于显示应用程序的不同页面。

接下来,在主应用程序中,需要定义一个方法来显示每个页面。例如:

class MyApp(App):

    def build(self):
        self.root = BoxLayout()

        self.nav_drawer = NavDrawer()
        self.root.add_widget(self.nav_drawer)

        self.main_page = MainScreen()
        self.root.add_widget(self.main_page)

        self.other_page = OtherScreen()
        self.root.add_widget(self.other_page)

    def show_main_page(self):
        self.main_page.show()
        self.nav_drawer.toggle_state()

    def show_other_page(self):
        self.other_page.show()
        self.nav_drawer.toggle_state()

在上面的代码中,我们定义了一个名为show_main_page和show_other_page的方法来显示不同的页面。这些方法通过调用相应页面的show方法来实现。同时,我们也调用了NavigationDrawer的toggle_state方法,以便在页面切换时自动关闭导航栏。

上一篇:从零到一的程序猿-day2-yoloV4训练及免环境易语言调用


下一篇:图论第一天