#14 - 创建图片浏览器

在上一步中，我们创建了菜单栏（MenuBar），这是实现图片网格和幻灯片切换功能的一部分。

回顾我们的计划：

• 首先，创建一个带有单个按钮的菜单栏（MenuBar）。
• 接着，创建一个图片浏览器（ImageBrowser），它由一个带菜单栏的图片网格（ImageGrid + MenuBar）组成。
• 最后，使用 PageFlip 在图片浏览器和幻灯片之间切换。

这一步，我们将创建图片浏览器（ImageBrowser）。

注意：如果你不想自己敲代码，可以在这里找到本步骤的全部代码：https://github.com/makepad/image_viewer/tree/main/step_14

#定义 ImageBrowser

我们先为 ImageBrowser 添加一个定义。ImageBrowser 结合了我们之前创建的 MenuBar 和 ImageGrid。

在 app.rs 中，找到 live design 块，在 ImageGrid 的定义之后，添加以下代码：

1ImageBrowser = <View> {
2        flow: Down,
3
4        <MenuBar> {}
5        <ImageGrid> {}
6    }

#更新 App

现在我们已经有了 ImageBrowser，接下来更新 App 的定义，使其显示 ImageBrowser 而不是 MenuBar（我们之后会把 MenuBar 放回合适的位置）。

在 app.rs 中，找到 live design 块，替换 App 的定义为以下内容：

1App = {{App}} {
2        placeholder: (PLACEHOLDER),
3
4        ui: <Root> {
5            <Window> {
6                body = <View> {
7                    <ImageBrowser> {}
8                }
9            }
10        }
11    }

#检查目前的进度

让我们检查一下到目前为止的进展。

确保你当前在你的包目录下，然后运行：

1cargo run --release

如果一切正常，你应该会看到一个图片网格，上方有一个用于切换到幻灯片的按钮：

#下一步

在这一步中，我们创建了图片浏览器（ImageBrowser）。下一步，我们将使用 PageFlip 在图片浏览器和幻灯片（Slideshow）之间进行切换。