Flutter 自定义顶部导航栏（方法一）

文件结构： 内容承接：https://blog.csdn.net/u013227399/article/details/103787189 main.dart import 'package:flutter/material.dart'; import 'routes/Routes.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( 在Flutter开发中，自定义顶部导航栏是提升应用界面独特性和用户体验的重要手段。在这个示例中，我们将讨论如何使用Flutter的Material库中的组件来创建一个自定义的顶部导航栏，也就是AppBar。我们来看看提供的文件结构和代码片段。 1. **文件结构**： 文件结构包括`main.dart`、`routes.dart`和`appBarDemo.dart`。`main.dart`是应用的入口点，`routes.dart`用于管理应用的路由，而`appBarDemo.dart`则包含了自定义AppBar的实现。 2. **main.dart**： 这个文件是Flutter应用的起点，通过`runApp(new MyApp())`启动应用。`MyApp`类继承了`StatelessWidget`，并覆盖了`build`方法。在`build`方法中，我们返回了一个`MaterialApp`实例，其中`debugShowCheckedModeBanner`设置为`false`以隐藏调试标志，`initialRoute`设置为`'/'`作为初始路由，`onGenerateRoute`用于处理自定义路由。 3. **routes.dart**： 在这个文件中，我们定义了一个`routes`字典，用于存储不同页面的构造函数。`onGenerateRoute`函数用于根据`RouteSettings`生成路由，它检查名称是否存在，并根据参数构建`MaterialPageRoute`。 4. **appBarDemo.dart**： 这里我们创建了一个名为`AppBarDemoPage`的无状态组件，它继承自`StatelessWidget`。在`build`方法中，我们使用`DefaultTabController`来创建一个带有两个选项卡的AppBar。`Scaffold`包含了这个AppBar，设置了标题、居中显示标题、背景颜色以及左侧和右侧的图标按钮。 5. **AppBar的自定义**： - `title`：在这里设置为`Text('AppBarDemoPage')`，可以自定义显示的文本。 - `centerTitle`：设置为`true`，使标题居中显示。 - `backgroundColor`：用`Colors.red`设置背景颜色，可以替换为你需要的任何颜色。 - `leading`：这是AppBar左侧的图标，这里设置为`IconButton`，显示菜单图标。 - `actions`：这是AppBar右侧的图标，这里包含两个`IconButton`，分别显示搜索和设置图标。 6. **IconButton的使用**： - `IconButton`提供了在AppBar上放置图标的功能，通过设置`icon`属性来指定图标，`onPressed`用于添加点击事件处理。 7. **自定义行为**： 对于AppBar中的图标按钮，你可以添加自定义的逻辑到`onPressed`回调中，例如在搜索按钮被点击时打印消息，或者在设置按钮被点击时打开设置页面。 通过上述步骤，我们可以实现一个基本的自定义顶部导航栏。然而，这只是一个基础版本，你可以进一步扩展功能，比如添加下拉菜单、滑动切换选项卡、动态改变颜色等。同时，注意保持代码的可维护性和遵循Flutter的最佳实践，如使用Provider或Bloc进行状态管理，以及遵循Widget的树状结构。