Flutter - 创建底部表 GetX 库

Flutter 是一种开源框架，用于构建高性能、高保真的应用程序。它使用 Dart 语言编写，具有热重载、丰富的 Widget 库以及强大的开发工具和生态系统。

GetX 是一个简单而强大的 Flutter 状态管理库，它可以帮助您快速开发复杂的、高性能的应用程序。本文将介绍如何使用 GetX 库创建底部表。

准备工作

在开始之前，请确保您已经安装了 Flutter。如果您还没有安装 Flutter，请先参阅Flutter 官方网站。

创建项目

首先，创建一个 Flutter 应用程序：

$ flutter create bottom_navbar

接下来，将 get 库添加到 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8

然后，在终端中运行以下命令，以下载并安装依赖项：

$ flutter pub get

创建底部表

现在，我们将创建一个底部表。首先，创建一个 bottom_navbar 文件夹，并在其中创建一个名为 bottom_navbar.dart 的文件。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class NavController extends GetxController {
  int currentIndex = 0;

  void changePage(int index) {
    this.currentIndex = index;
    update();
  }
}

class BottomNavbar extends StatelessWidget {
  final List<Widget> pages = [
    Container(color: Colors.blue),
    Container(color: Colors.red),
    Container(color: Colors.green),
  ];

  @override
  Widget build(BuildContext context) {
    return GetBuilder<NavController>(
      init: NavController(),
      builder: (navController) {
        return Scaffold(
          body: pages[navController.currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: navController.currentIndex,
            onTap: navController.changePage,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
          ),
        );
      },
    );
  }
}

在这个文件中，我们首先定义了一个名为 NavController 的 GetX 控制器，它用于管理我们的底部表和页面。

在 NavController 中，我们定义了一个 currentIndex，它表示我们当前选中的页面的索引。我们还定义了一个 changePage 方法，它会更新我们的 currentIndex 并调用 update()。

接下来，我们定义了一个名为 BottomNavbar 的 StatelessWidget，它包含我们的 Scaffold 和底部表，以及我们的页面。

在 BottomNavbar 中，我们使用了 GetBuilder<NavController>，它实现了简单但强大的依赖项注入，它会自动更新我们的页面以反映我们的 NavController。

我们还定义了一个名为 pages 的列表，它包含我们的页面。我们在这个列表中创建了三个简单的容器，每个容器都有不同的颜色。

最后，我们创建了一个名为 BottomNavigationBar 的底部表，并将其添加到了 Scaffold 中。我们使用 currentIndex 和 changePage 来更新当前选中的页面。我们还定义了三个不同的图标和标签，分别对应我们的三个页面。

使用底部表

现在，我们已经创建了我们的底部表，接下来将其添加到我们的应用程序中。在 main.dart 文件中，使用以下代码替换默认的 MyApp：

import 'package:flutter/material.dart';
import 'package:bottom_navbar/bottom_navbar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navbar Demo',
      home: BottomNavbar(),
    );
  }
}

在这个文件中，我们首先导入了我们的 BottomNavbar 文件。然后，我们将 MyApp 替换为一个简单的 MaterialApp，其中的 home 属性指定了我们的 BottomNavbar。

运行应用程序

完成了所有准备工作后，我们现在可以运行我们的应用程序：

$ flutter run

您应该看到一个带有底部表的容器，占据了整个屏幕，每个页面都有不同的颜色。现在，您可以尝试点击不同的标签，查看页面是否正确更改。

结论

在本文中，我们介绍了如何使用 GetX 库创建底部表。GetX 是一个强大的状态管理库，可以帮助您轻松地管理 Flutter 应用程序中的状态。如果您想深入了解 GetX 库，请查阅官方文档。