Flutter Hacker News API集成插件hackernews_api的使用

Flutter Hacker News API集成插件hackernews_api的使用

安装

首先，确保你已经安装了hackernews_api包。你可以通过以下命令进行安装：

flutter pub get

导入

在你的 Dart 文件中导入 hackernews_api 包：

import 'package:hackernews_api/hackernews_api.dart';

使用示例代码

下面是一个完整的示例代码，展示了如何使用 hackernews_api 获取 Hacker News 的新故事列表。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hacker News Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

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

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final HackerNews news = HackerNews(
    newsType: NewsType.newStories,
  );

  List<Story>? stories;

  [@override](/user/override)
  void initState() {
    super.initState();
    fetchStories();
  }

  Future<void> fetchStories() async {
    try {
      storiesIds = await news.getStoryIds();
      stories = await news.getStories(storyIds);
      setState(() {});
    } catch (e) {
      print('Error fetching stories: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (stories == null) {
      return Center(child: CircularProgressIndicator());
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Hacker News Example'),
      ),
      body: SafeArea(
          child: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: stories!.length,
              itemBuilder: (context, index) {
                var data = stories![index];
                var title = data.title;

                return Container(
                  padding: const EdgeInsets.all(14),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(title),
                      const Divider(),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      )),
    );
  }
}

更多关于Flutter Hacker News API集成插件hackernews_api的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Hacker News API集成插件hackernews_api的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中使用hackernews_api插件的示例代码。这个插件允许你轻松集成Hacker News API并获取数据。

首先，确保你已经在pubspec.yaml文件中添加了hackernews_api依赖：

dependencies:
  flutter:
    sdk: flutter
  hackernews_api: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，创建一个简单的Flutter应用来展示如何使用hackernews_api。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hacker News API Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HackerNewsScreen(),
    );
  }
}

class HackerNewsScreen extends StatefulWidget {
  @override
  _HackerNewsScreenState createState() => _HackerNewsScreenState();
}

class _HackerNewsScreenState extends State<HackerNewsScreen> {
  List<HackerNewsItem> _topStories = [];

  @override
  void initState() {
    super.initState();
    _fetchTopStories();
  }

  Future<void> _fetchTopStories() async {
    final HackerNewsApi api = HackerNewsApi();
    try {
      final List<int> topStoryIds = await api.getTopStories();
      if (topStoryIds.isNotEmpty) {
        final List<HackerNewsItem> stories = await Future.wait(
          topStoryIds.map((id) => api.getItemById(id)),
        );
        setState(() {
          _topStories = stories;
        });
      }
    } catch (e) {
      print('Error fetching top stories: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hacker News Top Stories'),
      ),
      body: _topStories.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _topStories.length,
              itemBuilder: (context, index) {
                final HackerNewsItem story = _topStories[index];
                return ListTile(
                  title: Text(story.title ?? 'No Title'),
                  subtitle: Text('by ${story.by} | ${story.timeAgo()}'),
                  onTap: () {
                    // Handle tap event, e.g., navigate to story details
                    print('Tapped on story: ${story.title}');
                  },
                );
              },
            ),
    );
  }
}

extension HackerNewsItemExt on HackerNewsItem {
  String get timeAgo {
    final DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(this.time * 1000);
    return relativeTime(dateTime);
  }
}

String relativeTime(DateTime dateTime) {
  final DateTime now = DateTime.now();
  final Duration difference = now.difference(dateTime);

  if (difference.inDays > 365) {
    return '${difference.inDays ~/ 365} years ago';
  } else if (difference.inDays > 30) {
    return '${difference.inDays ~/ 30} months ago';
  } else if (difference.inDays > 0) {
    return '${difference.inDays} days ago';
  } else if (difference.inHours > 0) {
    return '${difference.inHours} hours ago';
  } else if (difference.inMinutes > 0) {
    return '${difference.inMinutes} minutes ago';
  } else {
    return 'just now';
  }
}

代码解释：

  1. 依赖添加：确保在pubspec.yaml中添加了hackernews_api依赖。
  2. 主应用：MyApp是应用的主入口，包含一个HackerNewsScreen。
  3. 状态管理：HackerNewsScreen是一个有状态的小部件，用于管理Hacker News顶部故事的获取和显示。
  4. 数据获取：在initState中调用_fetchTopStories方法，该方法使用HackerNewsApi获取顶部故事的ID，然后根据这些ID获取故事详情。
  5. UI展示：使用ListView.builder展示获取到的故事列表，每个故事项显示标题、作者和时间（通过扩展方法timeAgo格式化）。
  6. 时间格式化：relativeTime方法用于将Unix时间戳转换为相对时间字符串。

运行这个应用，你应该能够看到Hacker News的顶部故事列表，并可以点击每个故事项（尽管当前点击事件只是打印日志）。

请根据实际需求和API文档进一步定制和扩展此示例。

回到顶部