Flutter自定义控件插件picto_widget的使用

欢迎来到OTTAA的通用图示Flutter小部件#

使用OTTAA图示小部件创建出色的应用程序，我们采用极简设计以促进理解。每个图示必须包含图像、文本和Fitzgerald关键颜色框架。然后你就可以开始使用了！

网页页面

• 访问我们的网页

特性

如果你正在开发一个使用图示的应用程序，图示小部件是一个很好的起点，你无需担心正确的比例、格式、颜色或字体。直接使用即可。

开始使用

要开始使用，请在pubspec.yaml文件中添加PictoWidget。执行flutter pub get后，你就可以开始了。

使用方法

以下是几个简短且有用的示例供用户参考。更长的示例代码可以放在/example文件夹中。

const like = 'sample';

贡献

我们非常欢迎你的帮助。在开始工作之前，请务必阅读并遵循以下指南。

如何贡献

报告问题

请提供关于错误的大量信息。提及OTTAA项目的版本，并解释如何重现问题。

代码贡献

创建拉取请求

为了创建拉取请求，必须满足以下条件：

• 避免与源代码发生文件冲突。
• 应描述应用的特性。
• 应将拉取请求应用到相应的分支。

行为准则

为了以协作的方式在OTTAA项目中工作并帮助我们的社区成长，我们要求你遵守以下行为准则。

多样性使我们成长

我们相信每个用户的年龄、性别、国籍、种族或性取向都提供了基于多样性的经验和知识，这些都有助于构建反映潜在用户真实需求的完整工具。

辩论丰富了我们

我们认为每个人都可以显著地改善软件，因此我们寻求在社区成员之间建立相互尊重，达成开发者之间的共识，并以最佳方式解决问题。

需要遵守以下行为准则：

• 避免歧视。
• 避免发布色情内容。
• 避免公布用户的详细信息或相关信息。
• 避免开玩笑。
• 避免侮辱。
• 避免评判他人的宗教或种族。

违反行为准则的报告

如果违反我们的行为准则，请按以下步骤报告：

• 提供你的联系信息。
• 发送情况的截图。
• 尽可能详细地解释情况。
• 发送邮件至以下地址：support@ottaaproject.com。

在审查报告后，负责分析案件的团队将采取以下行动：

• 通知违规用户。
• 制定用户改正态度的方法。

用户可能因以下情况被社区开除：

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用PictoWidget。

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:picto_widget/picto_widget.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是应用程序的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '图示小部件演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PictoWidgetExample(),
    );
  }
}

class PictoWidgetExample extends StatelessWidget {
  const PictoWidgetExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: GridView.builder(
          padding: const EdgeInsets.all(16),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisExtent: 119,
            childAspectRatio: 16 / 9,
            crossAxisSpacing: 12,
            mainAxisSpacing: 4,
          ),
          itemCount: 12,
          itemBuilder: (context, index) {
            return PictoWidget(
              onTap: () {
                print('点击事件');
              },
              text: '一家自行车店',
              imageUrl: "https://static.arasaac.org/pictograms/2282/2282_300.png",
              image: CachedNetworkImage(
                imageUrl: "https://static.arasaac.org/pictograms/2282/2282_300.png",
                fit: BoxFit.cover,
              ),
              colorNumber: index % 6 + 1,
              onLongPress: () {
                print('长按事件');
              },
              disable: index % 3 == 0,
              add: index % 2 == 0,
            );
          },
        ),
      ),
    );
  }
}