Flutter微前端架构插件microfrontends的使用

Flutter微前端架构插件microfrontends的使用

microfrontends

Flutter应用程序框架

⚠️ 实验性！不要在生产应用中使用 ⚠️

该项目仍处于实验阶段。API尚未定型，可能会发生变化。

使用

查看示例/example/

许可证

MIT

示例代码

example/lib/main.dart

import 'package:example/examples.dart';
import 'package:flutter/material.dart';
import 'package:microfrontends/microfrontends.dart'; // 导入microfrontends包

import 'app_widget.dart';
import 'header.dart';

void main() {
  runApp(Examples()); // 启动Examples类
}

class Examples extends StateContainerWidget { // 继承StateContainerWidget
  const Examples({Key? key}) : super(key: key);

  [@override](/user/override)
  initState(StateChunkSetter state) { // 初始化状态
    state<AppWidget>(ExamplesGrid()); // 设置初始AppWidget为ExamplesGrid
  }

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建UI
    return MaterialApp(
      home: Scaffold(
        body: QueryBuilder<AppWidget>(builder: (context, widget, _) { // 使用QueryBuilder来动态构建组件
          return Column(
            children: [
              Header(widget: widget), // 添加头部组件
              Container(height: 2, color: Theme.of(context).dividerColor), // 分割线
              Expanded(child: widget), // 扩展剩余空间以容纳当前widget
            ],
          );
        }),
      ),
    );
  }
}

class ExamplesGrid extends AppWidget { // 继承AppWidget
  final title = 'Examples';

  const ExamplesGrid({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建UI
    return LayoutBuilder(builder: (context, constraints) { // 使用LayoutBuilder来根据布局约束构建UI
      final crossAxisCount = (constraints.biggest.width ~/ 220).clamp(1, 9999); // 计算列数
      return GridView.count( // 使用GridView来创建网格布局
        crossAxisCount: crossAxisCount,
        childAspectRatio: 5 / 3, // 宽高比
        crossAxisSpacing: 8, // 横向间距
        mainAxisSpacing: 8, // 纵向间距
        padding: const EdgeInsets.all(8.0), // 填充
        children: examples.map((e) => ExampleCard(child: e)).toList(), // 生成每个例子卡片
      );
    });
  }
}

class ExampleCard extends StatelessWidget { // 继承StatelessWidget
  final AppWidget child;

  const ExampleCard({Key? key, required this.child}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建UI
    final br = BorderRadius.circular(12); // 圆角半径
    return Card(
      shape: RoundedRectangleBorder(borderRadius: br), // 设置形状
      elevation: 2, // 阴影高度
      child: InkWell( // 可点击区域
        borderRadius: br, // 设置圆角
        onTap: () { // 点击事件
          context.setState(child); // 更新状态
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0), // 填充
          child: Text( // 文本
            child.title, // 显示标题
            style: Theme.of(context)
                .textTheme
                .headline5!
                .copyWith(fontWeight: FontWeight.bold), // 设置样式
          ),
        ),
      ),
    );
  }
}