Flutter静态内容管理插件static_micro_cms的使用

当然，以下是一个关于如何使用 static_micro_cms 插件在 Flutter 应用中管理静态内容的示例代码。这个插件允许你从静态文件（如 JSON 或 YAML）中加载内容，非常适合用于管理简单的静态内容，比如应用内的文案、配置等。

首先，确保你已经在 pubspec.yaml 文件中添加了 static_micro_cms 依赖：

dependencies:
  flutter:
    sdk: flutter
  static_micro_cms: ^最新版本号 # 请替换为实际的最新版本号

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

接下来，假设你有一个 data 文件夹，里面包含了一个名为 content.json 的文件，内容如下：

{
  "home": {
    "title": "欢迎来到我的应用",
    "description": "这是一个使用 static_micro_cms 管理静态内容的示例应用。"
  },
  "about": {
    "title": "关于我们",
    "content": "我们致力于提供最好的用户体验。"
  }
}

接下来，在你的 Flutter 应用中加载和使用这些内容。下面是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Static Micro CMS Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Map<String, dynamic> _content;

  @override
  void initState() {
    super.initState();
    _loadContent();
  }

  Future<void> _loadContent() async {
    // 使用 StaticMicroCMS 加载 JSON 文件
    final cms = StaticMicroCMS(
      dataSource: DataSource.asset('data/content.json'),
    );

    try {
      final data = await cms.load();
      setState(() {
        _content = data!;
      });
    } catch (e) {
      print('Failed to load content: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Static Micro CMS Demo'),
      ),
      body: Center(
        child: _content.isEmpty
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    _content['home']['title'] ?? '',
                    style: TextStyle(fontSize: 24),
                  ),
                  SizedBox(height: 16),
                  Text(
                    _content['home']['description'] ?? '',
                    style: TextStyle(fontSize: 16),
                  ),
                  SizedBox(height: 32),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => AboutScreen(_content)),
                      );
                    },
                    child: Text('关于我们'),
                  ),
                ],
              ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  final Map<String, dynamic> content;

  AboutScreen(this.content);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('关于我们'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              content['about']['title'] ?? '',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            Text(
              content['about']['content'] ?? '',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

1. 在 initState 方法中，使用 StaticMicroCMS 从 data/content.json 文件中加载数据。
2. 将加载的数据存储在 _content 变量中。
3. 在 build 方法中，根据加载的数据显示首页的内容。
4. 添加了一个按钮，点击按钮后导航到 AboutScreen 页面，并传递加载的内容数据。

这样，你就可以使用 static_micro_cms 插件在 Flutter 应用中方便地管理静态内容了。