Flutter UI组件库插件flusmic_ui的使用

Flutter UI组件库插件flusmic_ui的使用

插件简介

flusmic_ui 是一个用于更方便地在 Flutter 中集成 Flusmic 的一组小部件、实用程序和扩展。

快速开始

首先，在你的 pubspec.yaml 文件中添加 flusmic_ui 依赖项：

dependencies:
  flusmic_ui: 4.0.0 /// 最新版本

更多详情请参阅我们的 wiki。

路线图

• [x] FlusmicBuilder.
• [x] FlusmicRichText: 初始支持（文本和图片）。
• [ ] FlusmicRichText: 完整文本项目支持（列表、片段和链接）。
• [ ] FlusmicRichText: 嵌入项目支持。

示例代码

以下是一个完整的示例代码，展示了如何使用 flusmic_ui 插件中的 FlusmicBuilder 和 FlusmicRichText 组件。

import 'package:flusmic_ui_example/src/flusmic_rich_text.dart'; // 导入富文本处理组件
import 'package:flutter/material.dart';
import 'src/flusmic_builder.dart'; // 导入FlusmicBuilder组件

void main() => runApp(FlusmicApp()); // 应用入口点

class FlusmicApp extends StatelessWidget { // 主应用类
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomeFlusmicScreen(), // 首页
        theme: ThemeData(
            primaryColor: Color(0xFF5163BA), // 主颜色
            scaffoldBackgroundColor: Color(0xFFF5F6F9), // 背景色
            accentColor: Color(0xFF35A86F))); // 强调色
  }
}

class HomeFlusmicScreen extends StatefulWidget { // 主页面状态类
  [@override](/user/override)
  _HomeFlusmicScreenState createState() => _HomeFlusmicScreenState(); // 创建状态实例
}

class _HomeFlusmicScreenState extends State<HomeFlusmicScreen> { // 主页面状态
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flusmic 示例')), // 应用栏
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0), // 内边距
        children: [
          HomeItem(
              Icons.build, // 图标
              '基于获取状态构建的小部件', // 子标题
              'FlusmicBuilder', // 标题
              () => Navigator.of(context).push(MaterialPageRoute( // 导航到FlusmicBuilder页面
                  builder: (context) => FlusmicBuilderScreen()))),
          HomeItem(
            Icons.text_fields, // 图标
            '用于消费富文本的小部件', // 子标题
            'FlusmicRichText', // 标题
            () => Navigator.of(context).push( // 导航到FlusmicRichText页面
              MaterialPageRoute(
                builder: (context) => FlusmicRichTextScreen(),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class HomeItem extends StatelessWidget { // 主页面项
  final IconData icon; // 图标
  final String subtitle; // 子标题
  final String title; // 标题
  final VoidCallback onPressed; // 点击事件

  HomeItem(this.icon, this.subtitle, this.title, this.onPressed); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 8.0), // 外边距
      clipBehavior: Clip.antiAlias, // 剪辑行为
      elevation: 3.0, // 阴影
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), // 圆角
      child: InkWell(
        onTap: onPressed, // 点击事件
        borderRadius: BorderRadius.circular(12.0), // 圆角
        splashColor: Theme.of(context).primaryColor, // 水波纹颜色
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 32.0), // 内边距
          child: Row(
            children: [
              Icon(icon, size: 40.0, color: Theme.of(context).accentColor), // 图标
              SizedBox(width: 32.0), // 空白间隔
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start, // 对齐方式
                  children: [
                    Text(title, style: Theme.of(context).textTheme.headline4), // 标题
                    SizedBox(height: 16.0), // 空白间隔
                    Text(subtitle) // 子标题
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}