多引擎齐飞，Flutter混合开发实战解析

Android

2022-12-21 14:56:24

Flutter混合开发：多引擎、多入口、多路由解析

多引擎齐飞：满足不同需求

在混合开发项目中，创建多个Flutter引擎以满足不同需求至关重要。例如，您可能需要一个引擎用于展示列表，另一个引擎用于展示详细信息。在本文中，我们将使用一个实际案例（工行投资理财页面）来演示如何创建多个引擎。

Dart多入口：对应不同页面

每个Flutter引擎都有一个相应的Dart入口，负责初始化应用程序并加载第一个页面。在我们的示例中，我们将创建两个Dart入口：一个用于列表页面，另一个用于详细信息页面。

路由切换：页面间无缝跳转

在Flutter中，通过路由可实现页面之间的跳转。我们可以使用命名路由，通过路由名称访问。在我们的示例中，我们将使用MaterialPageRoute类定义命名路由。

UI设计：打造美观页面

Flutter提供了丰富的组件，可用于构建UI界面。在我们的示例中，我们将使用Scaffold、AppBar、ListView、Card、Text和Image组件。

案例解析：工行投资理财页面

创建多个引擎

// 创建第一个引擎用于列表
final firstEngine = FlutterEngine();
firstEngine.run(MyApp1()); // 第一个Dart入口

// 创建第二个引擎用于详情
final secondEngine = FlutterEngine();
secondEngine.run(MyApp2()); // 第二个Dart入口

Dart多入口

// 第一个Dart入口（列表页面）
void main() {
  runApp(MyApp1());
}

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '理财产品列表',
      home: MyHomePage1(), // 列表页面
    );
  }
}

// 第二个Dart入口（详细信息页面）
void main() {
  runApp(MyApp2());
}

class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '理财产品详情',
      home: MyHomePage2(), // 详细信息页面
    );
  }
}

路由切换

// 命名路由定义
final routeObserver = RouteObserver<PageRoute>();

MaterialPageRoute<void> productDetailsRoute(String id) {
  return MaterialPageRoute<void>(
    settings: RouteSettings(name: '/product/$id'),
    builder: (context) => ProductDetailsPage(id: id),
  );
}

void navigateToProductDetails(String id) {
  Navigator.of(context).push(productDetailsRoute(id));
}

UI设计

// 列表页面
class MyHomePage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('理财产品列表')),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(products[index].name),
              onTap: () => navigateToProductDetails(products[index].id),
            ),
          );
        },
      ),
    );
  }
}

// 详细信息页面
class MyHomePage2 extends StatelessWidget {
  final String id;

  MyHomePage2({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('理财产品详情')),
      body: Center(
        child: Text('Product ID: $id'),
      ),
    );
  }
}