Material Design 实战之基于 AppBar 的 Navigation 布局-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一套设计语言，旨在为移动设备和 Web 应用程序提供一致的视觉和交互体验。其中，AppBar 和 Navigation 是 Material Design 中非常重要的组件，本文将介绍如何使用 AppBar 和 Navigation 实现一个完整的页面布局。

AppBar

AppBar 是 Material Design 中的顶部栏，通常包含应用程序的名称、菜单和其他操作按钮。在实际开发中，我们可以使用 AppBar 来实现以下功能：

显示应用程序的名称和图标
提供导航和搜索功能
显示通知和消息
提供操作按钮和菜单

在 Flutter 中，AppBar 是由 AppBar 组件实现的。例如，我们可以使用以下代码创建一个简单的 AppBar：

// javascriptcn.com 代码示例
AppBar(
  title: Text('Material Design 实战'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // TODO: 实现搜索功能
      },
    ),
    IconButton(
      icon: Icon(Icons.notifications),
      onPressed: () {
        // TODO: 显示通知和消息
      },
    ),
    PopupMenuButton(
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            child: Text('设置'),
            value: 'settings',
          ),
          PopupMenuItem(
            child: Text('帮助'),
            value: 'help',
          ),
        ];
      },
      onSelected: (value) {
        // TODO: 处理菜单选项
      },
    ),
  ],
)

在上述代码中，我们创建了一个包含标题、搜索按钮、通知按钮和菜单的 AppBar。其中，IconButton 是一个带有图标的按钮，PopupMenuButton 是一个带有弹出菜单的按钮。

Navigation

Navigation 是 Material Design 中的导航组件，通常用于显示应用程序的页面结构和内容。在实际开发中，我们可以使用 Navigation 来实现以下功能：

显示页面结构和内容
提供页面之间的导航和跳转
显示页面的标题和内容
提供页面操作和菜单

在 Flutter 中，Navigation 是由路由（Route）和 Navigator 组件实现的。例如，我们可以使用以下代码创建一个包含两个页面的 Navigation：

// javascriptcn.com 代码示例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Design 实战',
      home: HomePage(),
      routes: {
        '/home': (context) => HomePage(),
        '/profile': (context) => ProfilePage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('查看个人资料'),
          onPressed: () {
            Navigator.pushNamed(context, '/profile');
          },
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('个人资料'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回首页'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

在上述代码中，我们创建了一个包含两个页面的 Navigation。其中，MaterialApp 是一个包含路由配置的应用程序组件，HomePage 和 ProfilePage 是两个页面组件，Navigator 是一个用于页面导航的组件。

在 HomePage 中，我们使用 RaisedButton 组件创建了一个按钮，并在按钮的 onPressed 事件中使用 Navigator.pushNamed 方法跳转到 ProfilePage 页面。在 ProfilePage 中，我们使用 RaisedButton 组件创建了一个按钮，并在按钮的 onPressed 事件中使用 Navigator.pop 方法返回到上一个页面。

Navigation Drawer

Navigation Drawer 是 Material Design 中的侧边栏，通常用于显示应用程序的导航菜单和设置。在实际开发中，我们可以使用 Navigation Drawer 来实现以下功能：

显示应用程序的导航菜单和设置
提供页面之间的导航和跳转
显示页面的标题和内容
提供页面操作和菜单

在 Flutter 中，Navigation Drawer 是由 Drawer 组件实现的。例如，我们可以使用以下代码创建一个包含 Navigation Drawer 的页面：

// javascriptcn.com 代码示例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Design 实战',
      home: HomePage(),
      routes: {
        '/home': (context) => HomePage(),
        '/profile': (context) => ProfilePage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text('Material Design 实战'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('首页'),
              onTap: () {
                Navigator.pop(context);
                Navigator.pushNamed(context, '/home');
              },
            ),
            ListTile(
              title: Text('个人资料'),
              onTap: () {
                Navigator.pop(context);
                Navigator.pushNamed(context, '/profile');
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('查看个人资料'),
          onPressed: () {
            Navigator.pushNamed(context, '/profile');
          },
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('个人资料'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('返回首页'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

在上述代码中，我们创建了一个包含 Navigation Drawer 的页面。其中，Drawer 是一个包含菜单项的组件，DrawerHeader 是一个包含标题和图标的组件，ListTile 是一个表示菜单项的组件。

在 HomePage 中，我们使用 Drawer 组件创建了一个 Navigation Drawer，并在其中添加了两个菜单项。在菜单项的 onTap 事件中，我们使用 Navigator.pop 方法关闭 Navigation Drawer，并使用 Navigator.pushNamed 方法跳转到对应的页面。在 ProfilePage 中，我们使用 RaisedButton 组件创建了一个按钮，并在按钮的 onPressed 事件中使用 Navigator.pop 方法返回到上一个页面。

总结

本文介绍了 Material Design 中的 AppBar 和 Navigation 组件，并通过示例代码演示了如何使用 AppBar 和 Navigation 实现一个完整的页面布局。在实际开发中，我们可以根据具体的需求和设计要求，灵活使用 AppBar 和 Navigation 来实现各种功能和效果，提高应用程序的用户体验和可用性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650e41f295b1f8cacd77fac6