Flutter维基百科展示插件wiki_frame的使用

简介

wiki_frame 是一个用于在 Flutter 应用中展示维基百科内容的插件。它能够监听用户的搜索短语，通过维基百科的 API 查询信息，并返回摘要和缩略图（如果存在），以便在应用中展示。

该插件已经在 Android 上测试过，理论上也可以在 iOS 上运行。

使用说明

依赖安装

首先，在 pubspec.yaml 文件中添加 wiki_frame 依赖：

dependencies:
  wiki_frame: ^1.0.0

然后执行以下命令以更新依赖：

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何使用 wiki_frame 插件来查询维基百科并展示结果。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WikiSearchPage(),
    );
  }
}

class WikiSearchPage extends StatefulWidget {
  [@override](/user/override)
  _WikiSearchPageState createState() => _WikiSearchPageState();
}

class _WikiSearchPageState extends State<WikiSearchPage> {
  String _searchPhrase = '';
  String _extract = '';
  String _thumbnailUrl = '';

  Future<void> _searchWikipedia() async {
    // 清空之前的搜索结果
    setState(() {
      _extract = '';
      _thumbnailUrl = '';
    });

    // 调用维基百科 API 查询
    final result = await WikiFrame.search(_searchPhrase);

    // 更新 UI
    if (result != null) {
      setState(() {
        _extract = result.extract;
        _thumbnailUrl = result.thumbnailUrl;
      });
    } else {
      setState(() {
        _extract = '未找到相关内容';
        _thumbnailUrl = '';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('维基百科搜索'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  _searchPhrase = value;
                });
              },
              decoration: InputDecoration(
                labelText: '请输入搜索关键词',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _searchWikipedia,
              child: Text('搜索'),
            ),
            SizedBox(height: 16),
            if (_extract.isNotEmpty)
              Text(
                _extract,
                textAlign: TextAlign.justify,
              ),
            SizedBox(height: 16),
            if (_thumbnailUrl.isNotEmpty)
              Image.network(
                _thumbnailUrl,
                fit: BoxFit.contain,
              ),
          ],
        ),
      ),
    );
  }
}