Flutter YAML解析插件yaml_mapper的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter YAML解析插件yaml_mapper的使用

YAML Mapper 是一个简单的 YAML 映射解析器，它可以从 List<String> 中创建一个 Map<String, dynamic>。

使用方法

final List<String> lines = File('myFile.yaml').readAsLinesSync();
final Map<String, dynamic> yaml = parseMap(lines);

print(yaml['entry']);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 yaml_mapper 插件来解析 YAML 文件。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yaml_mapper/yaml_mapper.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Future<Map<String, dynamic>> getMap() async {
    // 读取 assets 目录下的 YAML 文件
    final String content = await rootBundle.loadString('assets/state.yaml');
    // 将文件内容按行分割
    final List<String> lines = content.split('\n');

    // 解析 YAML 文件内容
    return parseMap(lines, determineWhitespace(lines));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 FutureBuilder 来异步加载并显示 YAML 数据
            FutureBuilder(
              future: getMap(),
              builder: (context, snapshot) {
                // 如果数据加载完成，则显示 YAML 数据中的值
                return snapshot.hasData
                    ? Text(snapshot.data!['app']['buttonText'])
                    : Container(); // 如果数据未加载完成，则显示空容器
              },
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

YAML 文件示例

state.yaml 文件的内容如下：

app:
  buttonText: "点击我"

更多关于Flutter YAML解析插件yaml_mapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter YAML解析插件yaml_mapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用yaml_mapper插件来解析YAML文件的示例代码。yaml_mapper是一个用于在Dart和Flutter项目中处理YAML数据的库。

步骤1：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  yaml_mapper: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤2：创建一个YAML文件

在你的项目目录中创建一个YAML文件，例如config.yaml，内容如下：

database:
  host: localhost
  port: 3306
  username: root
  password: secret
app:
  name: MyFlutterApp
  version: 1.0.0

步骤3：使用yaml_mapper解析YAML文件

接下来，在你的Flutter项目中创建一个Dart文件，例如config_loader.dart，用于加载和解析YAML文件。

import 'dart:convert';
import 'package:yaml_mapper/yaml_mapper.dart';

class DatabaseConfig {
  String host;
  int port;
  String username;
  String password;

  DatabaseConfig({
    required this.host,
    required this.port,
    required this.username,
    required this.password,
  });

  factory DatabaseConfig.fromJson(Map<String, dynamic> json) => DatabaseConfig(
        host: json['host'] as String,
        port: json['port'] as int,
        username: json['username'] as String,
        password: json['password'] as String,
      );

  Map<String, dynamic> toJson() => {
        'host': host,
        'port': port,
        'username': username,
        'password': password,
      };
}

class AppConfig {
  String name;
  String version;

  AppConfig({
    required this.name,
    required this.version,
  });

  factory AppConfig.fromJson(Map<String, dynamic> json) => AppConfig(
        name: json['name'] as String,
        version: json['version'] as String,
      );

  Map<String, dynamic> toJson() => {
        'name': name,
        'version': version,
      };
}

class RootConfig {
  DatabaseConfig database;
  AppConfig app;

  RootConfig({
    required this.database,
    required this.app,
  });

  factory RootConfig.fromJson(Map<String, dynamic> json) => RootConfig(
        database: DatabaseConfig.fromJson(json['database'] as Map<String, dynamic>),
        app: AppConfig.fromJson(json['app'] as Map<String, dynamic>),
      );

  Map<String, dynamic> toJson() => {
        'database': database.toJson(),
        'app': app.toJson(),
      };
}

Future<RootConfig> loadConfig(String filePath) async {
  final String yamlContent = await File(filePath).readAsString();
  final Map<String, dynamic> jsonData = jsonDecode(jsonEncode(loadYaml(yamlContent)));
  return RootConfig.fromJson(jsonData);
}

步骤4：使用加载的配置

在你的Flutter应用的入口文件（例如main.dart）中使用加载的配置：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final RootConfig config = await loadConfig('assets/config.yaml');

  runApp(MaterialApp(
    title: config.app.name,
    home: Scaffold(
      appBar: AppBar(
        title: Text(config.app.name + ' v' + config.app.version),
      ),
      body: Center(
        child: Text('Database Host: ${config.database.host}'),
      ),
    ),
  ));
}

注意：确保你的config.yaml文件在assets文件夹中，并在pubspec.yaml文件中声明它：

flutter:
  assets:
    - assets/config.yaml

这样，你就可以在Flutter应用中解析和使用YAML文件中的数据了。

回到顶部