第十四篇【传奇开心果系列】BeeWare的Toga开发移动应用示例：Toga实现页面切换_beeware toga 界面刷新

系列博文目录

BeeWare的Toga开发移动应用示例系列

博文目录

前言

Toga实现页面跳转和切换的方式方法是多种多样的。使用 Toga 的灵活性，开发人员可以根据自己的需求选择适合的方式来实现自己需要的页面切换方式方法。

一、Toga页面跳转和切换方式方法介绍

Toga 提供了多种方式来实现页面跳转和切换。下面是一些常用的方法：

1. 使用TabView组件实现页面切换
   TabView是一个选项卡容器，可以在其中添加多个选项卡页，并根据用户选择显示相应的页面内容。
2. 使用页面堆栈管理器（Page Stack Manager）实现页面切换
   这是一种管理页面堆栈的方式，通过向页面堆栈添加和移除页面来实现页面切换。可以通过调用堆栈管理器的方法来添加新页面、移除当前页面或返回上一个页面。
3. 使用网格布局（Grid Layout）和可见性控制实现页面切换
   可以在一个网格布局中放置多个页面的元素，然后通过控制元素的可见性来实现页面之间的切换。例如，可以在一个网格布局中放置多个容器，根据需要显示或隐藏容器来显示不同的页面。
4. 使用按钮或菜单项点击实现页面切换
   通过在按钮或菜单项的回调函数中进行页面切换。当按钮或菜单项被点击时，可以通过调用视图跳转的方法。
5. 使用Toga-Router路由库实现页面切换
   这是一个为Toga设计的页面切换路由库，可以帮助您管理不同页面之间的导航。您可以定义路由规则和处理函数，根据URL或其他条件加载不同的页面。
6. Toga 自定义导航栏Navbar实现页面切换
   创建一个自定义组件，代表导航栏。该组件可以包含导航链接或操作按钮，并在点击时触发相应的事件。在应用程序的主窗口中添加导航栏组件，并设置适当的布局和样式。根据点击事件，通过更改主窗口的内容来实现页面切换或执行特定操作。
7. Toga自定义TabBar组件实现页面切换
   通过自定义组件TabBar来实现选项卡式导航。在Toga中，您可以使用Box组件作为容器，并在其中添加按钮或其他组件作为选项卡，然后根据选项卡的点击事件切换显示相应的内容。
   8.使用多窗口模式来实现页面跳转和切换
   创建多个Toga窗口对象，每个窗口对应一个页面。在窗口对象的构造函数中设置页面的布局和内容。使用按钮或其他交互组件的事件处理方法，在事件触发时关闭当前窗口并打开下一个窗口，实现页面的切换。
8. 使用手势操作实现页面切换
   您可以在Toga应用程序中监听用户的手势事件，并根据手势的方向来切换页面。使用手势库（如 Touch Gesture Recognizers）来实现通过手势操作进行页面切换。例如，可以通过滑动手势来切换页面。
9. 使用状态管理库（如Redux）来管理和控制页面的状态和切换。
   通过定义不同的页面状态，并根据用户的操作来更新状态，实现页面之间的切换。
10. 使用选项卡（Tab）：选项卡是一个常用的页面切换方式，可以在一个视图中显示多个标签页，并允许用户在标签页之间切换。可以使用 Toga 的选项卡组件来创建多个标签页，并根据用户的选择切换到不同的标签页。要使用选项卡（Tab）来实现页面换

二、使用TabView来实现页面切换

以下是一个示例代码，演示了如何使用TabView来实现页面切换：

import toga

class MyApp(toga.App):
    def startup(self):
        # 创建主窗口
        self.main_window = toga.MainWindow(title='My App')

        # 创建TabView
        self.tab_view = toga.TabView()

        # 创建选项卡页1
        page1 = toga.Box()
        label1 = toga.Label('This is Page 1')
        page1.add(label1)

        # 创建选项卡页2
        page2 = toga.Box()
        label2 = toga.Label('This is Page 2')
        page2.add(label2)

        # 将选项卡页添加到TabView中
        self.tab_view.add(page1, 'Page 1')
        self.tab_view.add(page2, 'Page 2')

        # 设置主窗口的内容
        self.main_window.content = self.tab_view

        # 显示主窗口
        self.main_window.show()

def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()

if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在上述示例代码中，我们创建了一个Toga应用程序，并在主窗口中添加了一个TabView组件。然后，我们创建了两个选项卡页（page1和page2），并将它们添加到TabView中。

每个选项卡页都是一个Box容器，可以在其中添加任意的组件作为页面内容。在这个示例中，我们在每个选项卡页中添加了一个Label来展示不同的页面内容。

通过TabView，用户可以点击选项卡来切换显示不同的选项卡页内容。

三、使用页面堆栈管理器（Page Stack Manager）来实现页面切换

以下是一个示例代码，演示了如何使用页面堆栈管理器来实现页面切换：

import toga

class HomePage(toga.Box):
    def __init__(self, stack):
        super().__init__()

        self.stack = stack

        # 创建页面内容
        label = toga.Label('This is the Home Page')
        button = toga.Button('Go to About', on_press=self.go_to_about)

        # 添加组件到容器中
        self.add(label)
        self.add(button)

    def go_to_about(self, widget):
        about_page = AboutPage(self.stack)
        self.stack.push(about_page)


class AboutPage(toga.Box):
    def __init__(self, stack):
        super().__init__()

        self.stack = stack

        # 创建页面内容
        label = toga.Label('This is the About Page')
        button = toga.Button('Go to Home', on_press=self.go_to_home)

        # 添加组件到容器中
        self.add(label)
        self.add(button)

    def go_to_home(self, widget):
        self.stack.pop()


class MyApp(toga.App):
    def startup(self):
        # 创建主窗口
        self.main_window = toga.MainWindow(title='My App')

        # 创建堆栈管理器
        stack = toga.Stack()

        # 创建首页并将其添加到堆栈中
        home_page = HomePage(stack)
        stack.add(home_page)

        # 设置主窗口的内容为堆栈管理器
        self.main_window.content = stack

        # 显示主窗口
        self.main_window.show()


def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()


if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

在上述示例代码中，我们创建了一个Toga应用程序，并在主窗口中使用页面堆栈管理器（Stack）来实现页面切换。我们定义了两个页面类（HomePage和AboutPage），并在每个页面中添加了一个按钮用于切换到另一个页面。

在MyApp的startup()方法中，我们创建了一个主窗口，并创建了一个堆栈管理器（Stack）。然后，我们创建了首页（home_page）并将其添加到堆栈中。当点击按钮时，我们通过推入（push）和弹出（pop）页面来实现页面的切换。

四、使用网格布局（Grid Layout）和可见性控制来实现页面之间的切换

以下是一个示例代码，演示了如何使用网格布局和可见性控制来实现页面切换：

import toga

class HomePage(toga.Box):
    def __init__(self):
        super().__init__()

        # 创建页面内容
        self.label1 = toga.Label('This is Page 1')
        self.button1 = toga.Button('Go to Page 2', on_press=self.go_to_page2)

        # 添加组件到容器中
        self.add(self.label1)
        self.add(self.button1)

    def go_to_page2(self, widget):
        # 设置当前页面元素的可见性
        self.label1.visible = False
        self.button1.visible = False

        # 显示Page2的元素
        page2.label2.visible = True
        page2.button2.visible = True


class Page2(toga.Box):
    def __init__(self):
        super().__init__()

        # 创建页面内容
        self.label2 = toga.Label('This is Page 2')
        self.button2 = toga.Button('Go to Page 1', on_press=self.go_to_page1)

        # 添加组件到容器中
        self.add(self.label2)
        self.add(self.button2)

        # 初始时隐藏Page2的元素
        self.label2.visible = False
        self.button2.visible = False

    def go_to_page1(self, widget):
        # 设置当前页面元素的可见性
        page2.label2.visible = False
        page2.button2.visible = False

        # 显示Page1的元素
        page1.label1.visible = True
        page1.button1.visible = True


def main():
    # 创建Toga应用程序并运行
    app = toga.App('myapp', 'org.example.myapp')
    
    # 创建网格布局
    grid = toga.Grid()

    # 创建页面1并放置在网格布局中的第一行第一列
    global page1
    page1 = HomePage()
    grid.add(page1, 0, 0)

    # 创建页面2并放置在网格布局中的第一行第一列
    global page2
    page2 = Page2()
    grid.add(page2, 0, 0)

    # 创建主窗口
    main_window = toga.MainWindow(title='My App')

    # 设置主窗口的内容为网格布局
    main_window.content = grid

    # 显示主窗口
    main_window.show()

    # 启动应用程序
    app.main_loop()


if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

在上述示例代码中，我们创建了两个页面类（HomePage和Page2），每个页面类都继承自toga.Box，并包含页面内容的元素。在HomePage中，我们定义了一个按钮，点击按钮时会隐藏当前页面的元素，并显示Page2的元素。在Page2中，我们定义了另一个按钮，点击按钮时会隐藏当前页面的元素，并显示HomePage的元素。

在main()函数中，我们创建了一个网格布局（toga.Grid），并将两个页面的元素放置在网格布局的相同位置（第一行第一列）。通过控制元素的可见性（visible属性），我们可以在不同的页面之间切换显示不同的页面内容。

五、使用按钮或菜单项点击实现页面切换

下面是一个示例代码，演示了如何使用按钮或菜单项点击来实现页面切换：

import toga

class MyApp(toga.App):
    def startup(self):
        # 创建主窗口
        self.main_window = toga.MainWindow(title='My App')

        # 创建布局管理器
        self.box = toga.Box()

        # 创建按钮和菜单项
        self.button1 = toga.Button('Page 1', on_press=self.show_page1)
        self.button2 = toga.Button('Page 2', on_press=self.show_page2)
        self.menu_item1 = toga.MenuItem('Page 1', on_select=self.show_page1)
        self.menu_item2 = toga.MenuItem('Page 2', on_select=self.show_page2)

        # 将按钮添加到布局管理器中
        self.box.add(self.button1)
        self.box.add(self.button2)

        # 将菜单项添加到应用程序的菜单栏中
        self.main_window.toolbar.add(self.menu_item1)
        self.main_window.toolbar.add(self.menu_item2)

        # 设置主窗口的内容
        self.main_window.content = self.box

        # 显示主窗口
        self.main_window.show()

    def show_page1(self, widget):
        # 清空布局管理器中的组件
        self.box.remove(self.button2)

        # 创建页面1的组件
        label1 = toga.Label('This is Page 1')
        self.box.add(label1)

    def show_page2(self, widget):
        # 清空布局管理器中的组件
        self.box.remove(self.button1)

        # 创建页面2的组件
        label2 = toga.Label('This is Page 2')
        self.box.add(label2)

def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()

if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在上述示例代码中，我们创建了一个Toga应用程序，并在主窗口中添加了按钮和菜单项。每个按钮和菜单项都绑定了相应的事件处理函数，当按钮被点击或菜单项被选择时，会调用对应的事件处理函数。

在事件处理函数中，我们根据需要添加或移除布局管理器中的组件，以实现页面的切换效果。在这个示例中，我们通过点击按钮或选择菜单项来切换页面，通过清空布局管理器并添加新的组件来显示不同的页面内容。

六、使用toga–router实现页面切换

以下是一个简单的示例代码，演示了如何使用Toga-Router库来实现页面切换：

import toga
from toga_router import Router, Route


class HomePage(toga.Box):
    def __init__(self, router):
        super().__init__()

        self.router = router

        # 创建页面内容
        label = toga.Label('This is the Home Page')
        button = toga.Button('Go to About', on_press=self.go_to_about)

        # 添加组件到容器中
        self.add(label)
        self.add(button)

    def go_to_about(self, widget):
        self.router.go_to('about')


class AboutPage(toga.Box):
    def __init__(self, router):
        super().__init__()

        self.router = router

        # 创建页面内容
        label = toga.Label('This is the About Page')
        button = toga.Button('Go to Home', on_press=self.go_to_home)

        # 添加组件到容器中
        self.add(label)
        self.add(button)

    def go_to_home(self, widget):
        self.router.go_to('home')


class MyApp(toga.App):
    def startup(self):
        # 创建路由
        router = Router()

        # 添加路由规则
        router.add(Route('home', HomePage, self))
        router.add(Route('about', AboutPage, self))

        # 设置主窗口的内容为路由的当前页面
        self.main_window = toga.MainWindow(title='My App', size=(400, 300))
        self.main_window.content = router.current_page

        # 显示主窗口
        self.main_window.show()


def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()


if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

在上述示例代码中，我们使用了Toga-Router库来实现页面切换和路由功能。我们定义了两个页面类（HomePage和AboutPage），并在每个页面中添加了一个按钮用于切换到另一个页面。

通过创建一个Router对象，并使用add()方法添加路由规则，我们可以将不同的页面映射到相应的URL路径。然后，根据当前URL路径，Router会自动渲染对应的页面。

在MyApp的startup()方法中，我们创建了一个主窗口，并将主窗口的内容设置为路由的当前页面。这样，当应用程序启动时，就会显示路由的初始页面。

七、Toga 自定义导航栏Navbar实现页面切换示例代码

下面是一个简单的示例代码，演示了如何使用Toga自定义Navbar组件实现导航栏的效果：

import toga

class NavigationBar(toga.Box):
    def __init__(self, on_page1_click, on_page2_click):
        super().__init__(style=Pack(direction=ROW))

        self.page1_button = toga.Button('Page 1', on_press=on_page1_click)
        self.page2_button = toga.Button('Page 2', on_press=on_page2_click)

        self.add(self.page1_button)
        self.add(self.page2_button)

class MyApp(toga.App):
    def startup(self):
        # 创建导航栏组件
        navigation_bar = NavigationBar(
            on_page1_click=self.show_page1,
            on_page2_click=self.show_page2
        )

        # 创建主容器
        main_box = toga.Box(style=Pack(direction=COLUMN))

        # 创建内容容器
        content_box = toga.Box(style=Pack(flex=1))

        # 创建页面1
        self.page1_label = toga.Label('This is Page 1')
        self.page1_label.style.update(width=200, height=200)

        # 创建页面2
        self.page2_label = toga.Label('This is Page 2')
        self.page2_label.style.update(width=200, height=200)

        # 将页面添加到内容容器中
        content_box.add(self.page1_label)

        # 将导航栏和内容容器添加到主容器中
        main_box.add(navigation_bar)
        main_box.add(content_box)

        # 创建主窗口并将主容器添加到窗口中
        self.main_window = toga.MainWindow(title='My App', size=(400, 300))
        self.main_window.content = main_box

        # 显示窗口
        self.main_window.show()

    def show_page1(self, widget):
        self.page1_label.style.update(display=VISIBLE)
        self.page2_label.style.update(display=NONE)

    def show_page2(self, widget):
        self.page1_label.style.update(display=NONE)
        self.page2_label.style.update(display=VISIBLE)

def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()

if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

在上述示例代码中，我们创建了一个自定义的导航栏组件NavigationBar，它包含两个按钮，分别用于切换到页面1和页面2。根据按钮的点击事件，我们通过更改页面的可见性来实现页面切换的效果。

八、Toga自定义TabBar组件实现页面切换

以下是一个简单的示例代码，演示了如何使用自定义TabBar组件导航：

import toga

class TabBar(toga.Box):
    def __init__(self, on_tab_click):
        super().__init__(style={'flex_direction': 'row'})

        self.tab1_button = toga.Button('Tab 1', on_press=lambda widget: on_tab_click(0))
        self.tab2_button = toga.Button('Tab 2', on_press=lambda widget: on_tab_click(1))

        self.add(self.tab1_button)
        self.add(self.tab2_button)

class MyApp(toga.App):
    def startup(self):
        # 创建选项卡栏组件
        tab_bar = TabBar(on_tab_click=self.on_tab_click)

        # 创建主容器
        main_box = toga.Box(style={'flex_direction': 'column'})

        # 创建内容容器
        content_box = toga.Box(style={'flex': 1})

        # 创建页面1
        self.page1_label = toga.Label('This is Page 1')
        self.page1_label.style.update({'width': 200, 'height': 200})

        # 创建页面2
        self.page2_label = toga.Label('This is Page 2')
        self.page2_label.style.update({'width': 200, 'height': 200})

        # 将页面1添加到内容容器中
        content_box.add(self.page1_label)

        # 将选项卡栏和内容容器添加到主容器中
        main_box.add(tab_bar)
        main_box.add(content_box)

        # 创建主窗口并将主容器添加到窗口中
        self.main_window = toga.MainWindow(title='My App', size=(400, 300))
        self.main_window.content = main_box

        # 显示窗口
        self.main_window.show()

    def on_tab_click(self, index):
        if index == 0:
            self.page1_label.style.update({'display': 'block'})
            self.page2_label.style.update({'display': 'none'})
        elif index == 1:
            self.page1_label.style.update({'display': 'none'})
            self.page2_label.style.update({'display': 'block'})

def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()

if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

在上述示例代码中，我们创建了一个自定义的选项卡栏组件TabBar，它包含两个按钮作为选项卡。根据按钮的点击事件，我们通过更改页面的可见性来实现选项卡的切换效果。

九、多窗口模式实现页面跳转和切换

以下是一个简单的示例代码，演示了使用Toga和多窗口模式实现页面跳转和切换的方法：

import toga

class Page1(toga.App):
    def startup(self):
        # 创建页面1的布局和内容
        self.main_window = toga.MainWindow(title='页面1')
        self.button = toga.Button('跳转到页面2', on_press=self.open_page2)
        self.main_window.content = self.button
        self.main_window.show()

    def open_page2(self, widget):
        # 关闭当前窗口并打开页面2
        self.main_window.close()
        Page2().startup()

class Page2(toga.App):
    def startup(self):
        # 创建页面2的布局和内容
        self.main_window = toga.MainWindow(title='页面2')
        self.button = toga.Button('返回页面1', on_press=self.open_page1)
        self.main_window.content = self.button
        self.main_window.show()

    def open_page1(self, widget):
        # 关闭当前窗口并打开页面1
        self.main_window.close()
        Page1().startup()

def main():
    # 启动应用程序，打开页面1
    Page1().startup()

if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在上述示例代码中，我们创建了两个Toga窗口对象，分别对应页面1和页面2。

在每个窗口对象的构造函数中，我们设置了页面的布局和内容，并通过按钮的事件处理方法实现了页面的切换。

在事件处理方法中，我们关闭当前窗口并打开下一个窗口，从而实现页面的跳转和切换效果。

十、使用手势操作实现页面切换

以下是一个示例代码，演示了如何使用手势操作实现页面切换：

import toga

class HomePage(toga.Box):
    def __init__(self, stack):
        super().__init__()

        self.stack = stack

        # 创建页面内容
        label = toga.Label('This is the Home Page')
        self.add(label)

    def on_swipe_left(self, widget):
        about_page = AboutPage(self.stack)
        self.stack.push(about_page)


class AboutPage(toga.Box):
    def __init__(self, stack):
        super().__init__()

        self.stack = stack

        # 创建页面内容
        label = toga.Label('This is the About Page')
        self.add(label)

    def on_swipe_right(self, widget):
        self.stack.pop()


class MyApp(toga.App):
    def startup(self):
        # 创建主窗口
        self.main_window = toga.MainWindow(title='My App')

        # 创建堆栈管理器
        stack = toga.Stack()

        # 创建首页并将其添加到堆栈中
        home_page = HomePage(stack)
        stack.add(home_page)

        # 设置主窗口的内容为堆栈管理器
        self.main_window.content = stack

        # 注册手势事件监听器
        self.main_window.on_swipe_left = home_page.on_swipe_left
        self.main_window.on_swipe_right = about_page.on_swipe_right

        # 显示主窗口
        self.main_window.show()


def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()


if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在上述示例代码中，我们创建了两个页面类（HomePage和AboutPage），每个页面类都继承自toga.Box，并包含页面内容的元素。

在HomePage的构造函数中，我们将堆栈管理器（stack）传递给页面对象，以便在手势事件处理程序中进行页面切换。我们定义了on_swipe_left()方法，在用户向左滑动时触发，用于切换到AboutPage页面。

在AboutPage的构造函数中，我们同样将堆栈管理器（stack）传递给页面对象。我们定义了on_swipe_right()方法，在用户向右滑动时触发，用于返回到HomePage页面。

在MyApp的startup()方法中，我们创建了一个主窗口，并将堆栈管理器作为主窗口的内容。然后，我们注册了手势事件的监听器，将事件与相应的页面方法关联起来。

请注意，手势操作的可用性取决于设备和操作系统的支持情况。在某些平台上，可能需要特定的设置或权限才能使用手势操作。此外，不同的设备和操作系统可能具有不同的手势操作规范，请确保您的应用程序符合目标平台的手势操作规范。

十一、使用状态管理库（如Redux）来管理和控制页面的状态和切换

以下是一个示例代码，演示了如何使用状态管理来实现页面切换：

import toga
from redux import createStore

# 定义页面状态
initial_state =    'current_page': 'home'
}

# 定义页面切换的动作类型
SET_CURRENT_PAGE = 'SET_CURRENT_PAGE'

# 定义页面切换的动作创建函数
def set_current_page(page):
    return {
        'type': SET_CURRENT_PAGE,
        'page': page
    }

# 定义页面切换的状态处理函数
def reducer(state, action):
    if action['type'] == SET_CURRENT_PAGE:
        return {
            'current_page': action['page']
        }
    else:
        return state

# 创建状态存储
store = createStore(reducer, initial_state)

# 创建首页
class HomePage(toga.Box):
    def __init__(self, store):
        super().__init__()

        self.store = store

        # 创建页面内容
        label = toga.Label('This is the Home Page')
        button = toga.Button('Go to About', on_press=self.go_to_about)

        # 添加组件到容器中
        self.add(label)
        self.add(button)

    def go_to_about(self, widget):
        # 更新状态，切换到About页面
        self.store.dispatch(set_current_page('about'))


# 创建关于页面
class AboutPage(toga.Box):
    def __init__(self, store):
        super().__init__()

        self.store = store

        # 创建页面内容
        label = toga.Label('This is the About Page')
        button = toga.Button('Go to Home', on_press=self.go_to_home)

        # 添加组件到容器中
        self.add(label)
        self.add(button)

    def go_to_home(self, widget):
        # 更新状态，切换到Home页面
        self.store.dispatch(set_current_page('home'))


class MyApp(toga.App):
    def startup(self):
        # 创建主窗口
        self.main_window = toga.MainWindow(title='My App')

        # 获取当前页面状态
        current_page = store.getState()['current_page']

        # 根据当前页面状态创建相应的页面
        if current_page == 'home':
            page = HomePage(store)
        elif current_page == 'about':
            page = AboutPage(store)
        else:
            raise ValueError(f'Invalid page: {current_page}')

        # 设置主窗口的内容为当前页面
        self.main_window.content = page

        # 监听状态变化，根据新的状态切换页面
        def on_state_change():
            new_page = store.getState()['current_page']
            if new_page != current_page:
                if new_page == 'home':
                    self.main_window.content = HomePage(store)
                elif new_page == 'about':
                    self.main_window.content = AboutPage(store)
                else:
                    raise ValueError(f'Invalid page: {new_page}')

        store.subscribe(on_state_change)

        # 显示主窗口
        self.main_window.show()


def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()


if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

在上述示例代码中，我们使用Redux库来管理页面的状态和切换。首先，我们定义了初始的页面状态（initial_state），以及页面切换的动作类型（SET_CURRENT_PAGE）和动作创建函数（set_current_page）。

然后，我们定义了状态处理函数（reducer），根据不同的动作类型来更新页面状态。在MyApp的startup()方法中，我们创建了一个主窗口，并获取当前的页面状态。根据当前页面状态，我们创建相应的页面对象，并将其设置为主窗口的内容。

接下来，我们监听状态变化（store.subscribe(on_state_change)），当状态发生变化时，根据新的状态切换到相应的页面。

通过使用状态管理库，我们可以更方便地管理和控制页面的状态和切换，使页面之间的切换逻辑更加清晰和可维护。

十二、使用选项卡（Tab）来实现页面换

以下是一个示例代码，演了如何使用选项卡来实现页面切换

import toga

class HomePage(t.Box):
    def __init__(self):
       ().__init__()

        # 创建页面内容
        = toga.Label('This is the Home Page')
        self.add(label)


class AboutPage(toga.Box):
    def __init__(self):
        super().__init__()

        # 创建页面内容
        label = toga.Label('This is the About Page')
        self.add(label)


class MyApp(toga.App):
    def startup(self):
        # 创建主窗口
        self.main_window = toga.MainWindow(title='My App')

        # 创建选项卡控件
        tab_group = toga.TabGroup()

        # 创建首页并添加到选项卡控件
        home_page = HomePage()
        tab_group.add('Home', home_page)

        # 创建关于页面并添加到选项卡控件
        about_page = AboutPage()
        tab_group.add('About', about_page)

        # 设置主窗口的内容为选项卡控件
        self.main_window.content = tab_group

        # 显示主窗口
        self.main_window.show()


def main():
    # 创建Toga应用程序并运行
    app = MyApp('myapp', 'org.example.myapp')
    app.main_loop()


if __name__ == '__main__':
    main()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在上述示例代码中，我们创建了两个页面类（HomePage和AboutPage），每个页面类都继承自toga.Box，并包含页面内容的元素。

在MyApp的startup()方法中，我们创建了一个主窗口，并创建了一个选项卡控件（toga.TabGroup）。然后，我们分别创建了首页（home_page）和关于页面（about_page），并将它们分别添加到选项卡控件中。

最后，我们将选项卡控件设置为主窗口的内容，这样在应用程序运行时就会显示选项卡控件和默认选中的页面。

通过使用选项卡来实现页面切换，用户可以通过选择不同的选项卡来切换显示不同的页面内容。这是一种常见且直观的方式，适用于具有多个相关页面的应用程序。您可以根据具体需求自定义选项卡的样式和行为，以实现更复杂的页面切换效果。