Flutter 入门教程——山寨掘金（二）

2024-02-15 00:06:04

掘金发现页：实现与时间差计算

构建发现页

掘金应用的核心页面之一是发现页，它展示着平台上最新的文章和动态。要实现发现页，首先需要创建一个新的页面，在 lib/pages 文件夹下创建名为 discovery_page.dart 的新文件。

import 'package:flutter/material.dart';

class DiscoveryPage extends StatefulWidget {
  @override
  _DiscoveryPageState createState() => _DiscoveryPageState();
}

class _DiscoveryPageState extends State<DiscoveryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('发现'),
      ),
      body: Center(
        child: Text('发现页'),
      ),
    );
  }
}

将发现页添加到应用程序中，在 lib/main.dart 文件中进行以下操作：

...
import 'package:flutter_掘金/pages/discovery_page.dart';

...
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      home: DiscoveryPage(),
    );
  }
}

运行应用程序即可查看发现页。

计算文章发布时间与当前时间的差值

为了在发现页中显示文章发布时间与当前时间的差值，我们需要创建一个工具。在 lib/utils 文件夹下创建一个名为 count_time.dart 的新文件，编写时间差计算代码：

import 'package:flutter/material.dart';

class CountTime {
  static String countTime(String time) {
    DateTime dateTime = DateTime.parse(time);
    DateTime now = DateTime.now();
    Duration difference = now.difference(dateTime);

    if (difference.inDays > 0) {
      return '${difference.inDays}天前';
    } else if (difference.inHours > 0) {
      return '${difference.inHours}小时前';
    } else if (difference.inMinutes > 0) {
      return '${difference.inMinutes}分钟前';
    } else {
      return '刚刚';
    }
  }
}

在发现页中使用此工具：

...
import 'package:flutter_掘金/utils/count_time.dart';

...
class _DiscoveryPageState extends State<DiscoveryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body: Center(
        child: Text(CountTime.countTime('2023-03-08 12:00:00')),
      ),
    );
  }
}