【Flutter】Flutter 创建每个页面公用的底部框

文章目录

- 一、前言
- 二、创建公用底部框的步骤
- - 1. 创建一个公用的底部框 Widget
  - 2. 在页面中使用公用的底部框 Widget
- 三、示例：电商应用中的公用底部框
- - 1. 创建电商应用的底部框 Widget
  - 2. 在电商应用的各个页面中使用底部框 Widget
- 四、完整代码示例
- 五、一些注意事项
- 六、总结

一、前言

在 Flutter 的开发中，我们经常会遇到需要在多个页面共享某些组件的情况。底部框，也就是我们常说的底部导航栏，就是一个很常见的例子。在一些应用中，底部导航栏会在多个页面中重复出现，而且功能和样式基本相同。如果我们在每个页面都重新定义底部导航栏，无疑会增加代码的冗余性，而且也不便于我们对底部导航栏的管理和修改。

如果你想深入学习 Flutter，掌握更多的技巧和最佳实践，我有一个好消息要告诉你：我们有一个全面的 Flutter专栏->Flutter Developer 101 入门小册 等待着你。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。现在，让我们开始今天的学习吧！

二、创建公用底部框的步骤

我们主要经过以下两个步骤来创建一个公用的底部框：

1. 创建一个公用的底部框 Widget

在 Flutter 中，我们可以创建一个新的 Widget，作为我们的公用底部框。我们可以定义这个 Widget 的样式，以及它包含的元素。在定义这个 Widget 时，我们可以根据需要添加更多的功能，比如点击事件、动画效果等。

class CommonBottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: '业务',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: '我的',
        ),
      ],
      // 其他需要的配置
    );
  }
}

2. 在页面中使用公用的底部框 Widget

在我们需要使用公用底部框的页面中，我们只需要在页面的布局中添加这个 Widget 就可以了。这样，我们就可以在多个页面中共享这个底部框，而不需要在每个页面中都重新定义。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Text('这是首页'),
      ),
      bottomNavigationBar: CommonBottomBar(),  // 使用公用的底部框
    );
  }
}

三、示例：电商应用中的公用底部框

我们来看一个具体的例子，假设我们正在开发一个电商应用，这个应用有四个页面：首页、分类、购物车、个人中心。这四个页面都需要使用到同样的底部导航栏。

1. 创建电商应用的底部框 Widget

在电商应用中，我们可以创建一个包含四个导航项的底部框 Widget。每个导航项都由一个图标和文字标签组成。我们可以根据实际的业务需求，为每个导航项添加点击事件。

class EcommerceBottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.category),
          label: '分类',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart),
          label: '购物车',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: '个人中心',
        ),
      ],
      // 其他需要的配置
    );
  }
}

2. 在电商应用的各个页面中使用底部框 Widget

在电商应用的每个页面中，我们都可以使用这个公用的底部框。这样，我们就可以确保在每个页面中，底部导航栏的样式和功能都是一致的。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Text('这是首页'),
      ),
      bottomNavigationBar: EcommerceBottomBar(),  // 使用电商应用的底部框
    );
  }
}

四、完整代码示例

// 公用底部框
class EcommerceBottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.category),
          label: '分类',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart),
          label: '购物车',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: '个人中心',
        ),
      ],
      // 其他需要的配置
    );
  }
}

// 首页
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Text('这是首页'),
      ),
      bottomNavigationBar: EcommerceBottomBar(),  // 使用电商应用的底部框
    );
  }
}

// 其他页面
// ...

五、一些注意事项

在使用公用底部框时，我们需要注意以下几点：

尽量保持底部框的样式和功能简单，这样更利于代码的复用。
在添加新的功能时，考虑到这个底部框可能会在多个页面中使用，所以要尽量避免添加页面特定的功能。
如果需要

在某些页面中对底部框进行特殊处理（比如改变样式或者添加特定的点击事件），我们可以在创建页面时传入参数来进行自定义，而不是直接修改公用底部框的代码。

六、总结

在本文中，我们学习了如何在 Flutter 中创建一个公用的底部框，并在每个页面中调用。通过创建公用的底部框，我们可以避免在每个页面中都重新定义底部导航栏，减少了代码的冗余性，也使得底部导航栏的管理和修改变得更加方便。

创建公用底部框只是复用代码的一个例子，实际上，在我们的开发过程中，还有很多其他的场景也可以使用到这种方法，比如头部导航栏、侧边菜单等等。希望通过这篇文章，你能对 Flutter 的复用性有更深的理解，也能在你的开发过程中更好的利用这一特性。

如果你对 Flutter 感兴趣，想要更深入地学习，那么我要推荐你一个很棒的资源：我们的 Flutter专栏->Flutter Developer 101 入门小册。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。比如，你知道如何使用 Flutter 构建一个完整的应用吗？在我们的专栏中，你将找到答案。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。让我们一起在 Flutter 的世界中继续探索吧！如果你想了解更多，可以先阅读我们的 一站式解决你的需求，Flutter Developer 101 入门小册专栏指引。