Flutter词云生成插件 word_cloud 的使用

目录

• WordCloudData
• WordCloudView
• WordCloudTap
• WordCloudTapView

WordCloudData

为了在Flutter中使用词云组件，首先需要将数据设置到WordCloudData对象中。

WordCloudData mydata = WordCloudData(data: data_list);

参数data需要一个包含键为word和value的Map列表。例如：

List<Map> data_list= [
  {'word': 'Apple','value': 100},
  {'word': 'Samsung','value': 60},
];

另一种添加数据的方法是使用实例方法addData：

mydata.addData(String word, double value);

WordCloudView

设置了数据之后，可以使用WordCloudView组件来展示词云：

WordCloudView(
  data: mydata,
  mapwidth: 500,
  mapheight: 500,
)

这是一个基本用法示例。以下是基于示例数据集的结果：

更多属性

mapcolor

通过mapcolor属性可以设置词云背景颜色：

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
)

colorlist

通过colorlist参数可以改变单词的颜色。需要输入Color类型的列表，词云会选择字体颜色随机显示：

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
)

shape

可以通过shape参数决定词云的整体形状。目前支持圆形和椭圆两种形状：

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  shape: WordCloudCircle(radius: 250),
)

WordCloudTap

WordCloudTap和WordCloudTapView使得词云中的单词可点击。首先定义WordCloudTap并设置想要点击的单词及其对应的函数：

WordCloudTap wordtaps = WordCloudTap();

wordtaps.addWordtap(String word, Function function);

示例代码如下：

WordCloudTap wordtaps = WordCloudTap();
int count = 0;
String wordstring = '';

// 设置WordCloudTap
for (int i = 0; i < data_list.length; i++) {
  void tap() {
    setState(() {
      count += 1;
      wordstring = data_list[i]['word'];
    });
  }
  wordtaps.addWordtap(data_list[i]['word'], tap);
}

WordCloudTapView

完成WordCloudTap的设置后，可以将其作为WordCloudTapView的一个因子使用。与WordCloudView不同的是，WordCloudTapView需要一个额外的参数wordtap，用于传入WordCloudTap对象。

WordCloudTapView(
  data: wcdata,
  wordtap: wordtaps,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
)

示例项目

下面是一个完整的示例项目，展示了如何使用word_cloud插件生成词云，并使其可点击：

import 'package:flutter/material.dart';
import 'package:word_cloud/word_cloud_data.dart';
import 'package:word_cloud/word_cloud_shape.dart';
import 'package:word_cloud/word_cloud_tap.dart';
import 'package:word_cloud/word_cloud_tap_view.dart';
import 'package:word_cloud/word_cloud_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Word Cloud Example Page',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Word Cloud Example Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 示例数据列表
  List<Map> word_list = [
    // 数据略...
  ];
  int count = 0;
  String wordstring = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    WordCloudData wcdata = WordCloudData(data: word_list);
    WordCloudTap wordtaps = WordCloudTap();

    // 设置WordCloudTap
    for (int i = 0; i < word_list.length; i++) {
      void tap() {
        setState(() {
          count += 1;
          wordstring = word_list[i]['word'];
        });
      }
      wordtaps.addWordtap(word_list[i]['word'], tap);
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Clicked Word : ${wordstring}', style: TextStyle(fontSize: 20)),
            Text('Clicked Count : ${count}', style: TextStyle(fontSize: 20)),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                WordCloudTapView(
                  data: wcdata,
                  wordtap: wordtaps,
                  mapcolor: Color.fromARGB(255, 174, 183, 235),
                  mapwidth: 500,
                  mapheight: 500,
                  fontWeight: FontWeight.bold,
                  shape: WordCloudCircle(radius: 250),
                  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
                ),
                SizedBox(height: 15, width: 30),
                WordCloudView(
                  data: wcdata,
                  mapcolor: Color.fromARGB(255, 174, 183, 235),
                  mapwidth: 500,
                  mapheight: 500,
                  fontWeight: FontWeight.bold,
                  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}