Flutter化学式结构式查看插件chemical_structural_formula_viewer的使用

Flutter化学式结构式查看插件chemical_structural_formula_viewer的使用

化学结构式查看器

这是一个用于在Flutter应用中展示化学结构式的插件。

特性

• 支持CDXML和CML格式。
• 目前界面较为简单，仅提供基础的展示功能。

开始使用

首先，在你的pubspec.yaml文件中添加该插件：

dependencies:
  chemical_structure_formula_viewer: ^0.0.1

然后运行flutter pub get来安装该插件。

使用方法

以下是一个完整的示例代码，展示了如何在应用中使用chemical_structure_formula_viewer插件：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:chemical_structural_formula_viewer/chemical_structural_formula_viewer.dart';
import 'package:file_picker/file_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  StructurePage? page;
  List<String> files = [];

  void addData() async {
    // 打开文件选择器，允许用户选择CDXML或CML文件
    final result = await FilePicker.platform.pickFiles(
        allowedExtensions: ["cdxml", "cml"],
        type: FileType.custom,
        allowMultiple: true);

    if (result == null) return;

    // 获取选中的文件路径
    final pathes = result.files.map((e) => e.path).nonNulls;
    print(pathes.first);

    // 将文件路径添加到列表中，并加载第一个文件
    files.addAll(pathes);
    load(pathes.first);
    print("done");

    // 更新状态以刷新UI
    setState(() {});
  }

  void load(String path) {
    // 读取文件内容
    var xml = File(path).readAsStringSync();

    // 根据文件扩展名解析XML
    switch (path.split(".").last) {
      case "cdxml":
        page = parseCdxml(xml);
        break;
      case "cml":
        page = parseCml(xml);
        break;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView.builder(
            itemCount: files.length,
            itemBuilder: (context, index) {
              return TextButton(
                  onPressed: () {
                    // 当用户点击侧边栏中的文件时，加载对应的文件
                    Navigator.pop(context);
                    load(files[index]);
                    setState(() {});
                  },
                  child: Text(files[index]));
            }),
      ),
      appBar: AppBar(
        title: const Text('化学结构式查看器'),
      ),
      body: InteractiveViewer(
        maxScale: 100,
        minScale: 0.1,
        child: StructureViewer(
          page: page,
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: addData),
    );
  }
}

示例代码

以下是完整的示例代码，您可以直接复制并在您的项目中运行：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:chemical_structural_formula_viewer/chemical_structural_formula_viewer.dart';
import 'package:file_picker/file_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  StructurePage? page;
  List<String> files = [];

  void addData() async {
    final result = await FilePicker.platform.pickFiles(
        allowedExtensions: ["cdxml", "cml"],
        type: FileType.custom,
        allowMultiple: true);

    if (result == null) return;

    final pathes = result.files.map((e) => e.path).nonNulls;
    print(pathes.first);
    files.addAll(pathes);
    load(pathes.first);
    print("done");
    setState(() {});
  }

  void load(String path) {
    var xml = File(path).readAsStringSync();
    switch (path.split(".").last) {
      case "cdxml":
        page = parseCdxml(xml);
        break;
      case "cml":
        page = parseCml(xml);
        break;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView.builder(
            itemCount: files.length,
            itemBuilder: (context, index) {
              return TextButton(
                  onPressed: () {
                    Navigator.pop(context);
                    load(files[index]);
                    setState(() {});
                  },
                  child: Text(files[index]));
            }),
      ),
      appBar: AppBar(
        title: const Text('化学结构式查看器'),
      ),
      body: InteractiveViewer(
        maxScale: 100,
        minScale: 0.1,
        child: StructureViewer(
          page: page,
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: addData),
    );
  }
}