Flutter基础页面构建插件flutter_base_page的使用

flutter_base_page 是一个用于简化 Flutter 应用页面构建的插件。它提供了一些基础的功能和结构，帮助开发者快速搭建页面，减少重复代码。以下是如何使用 flutter_base_page 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_base_page 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_base_page: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 flutter_base_page 插件：

import 'package:flutter_base_page/flutter_base_page.dart';

3. 创建基础页面

flutter_base_page 提供了一个 BasePage 类，你可以继承它来创建自己的页面。BasePage 提供了一些常用的功能，如页面标题、加载状态、错误处理等。

class MyHomePage extends BasePage {
  MyHomePage({Key? key}) : super(key: key, title: 'Home Page');

  [@override](/user/override)
  Widget buildContent(BuildContext context) {
    return Center(
      child: Text('Hello, Flutter Base Page!'),
    );
  }
}

4. 使用页面

在你的应用中使用这个页面，例如在 main.dart 中：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

5. 自定义页面

你可以根据需要自定义页面的行为和外观。例如，你可以重写 buildAppBar 和 buildBottomNavigationBar 方法来自定义 AppBar 和 BottomNavigationBar。

class MyHomePage extends BasePage {
  MyHomePage({Key? key}) : super(key: key, title: 'Home Page');

  [@override](/user/override)
  Widget buildContent(BuildContext context) {
    return Center(
      child: Text('Hello, Flutter Base Page!'),
    );
  }

  [@override](/user/override)
  PreferredSizeWidget? buildAppBar(BuildContext context) {
    return AppBar(
      title: Text('Custom AppBar'),
      actions: [
        IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {
            // 处理设置按钮点击事件
          },
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget? buildBottomNavigationBar(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: 'Business',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
      ],
      currentIndex: 0,
      onTap: (index) {
        // 处理底部导航栏点击事件
      },
    );
  }
}

6. 处理加载状态和错误

BasePage 提供了 isLoading 和 error 属性，你可以使用它们来处理页面的加载状态和错误。

class MyHomePage extends BasePage {
  MyHomePage({Key? key}) : super(key: key, title: 'Home Page');

  [@override](/user/override)
  Widget buildContent(BuildContext context) {
    if (isLoading) {
      return Center(child: CircularProgressIndicator());
    }

    if (error != null) {
      return Center(child: Text('Error: $error'));
    }

    return Center(
      child: Text('Hello, Flutter Base Page!'),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    // 模拟加载数据
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        isLoading = false;
      });
    });
  }
}