用 Flutter 做一个名言金句应用

应用架构及设计

好的，一开始让我们先明确一些事情，我们做这个应用主要想实现什么？我们要先构建好它的骨架，让它至少能够展示一些内容给用户，之后我们再考虑其他，比如添加一些请求，美化一下页面什么的。

我们先把页面大致地分为三块：

• 顶部导航栏，用于放置一些按钮。
• 中间内容显示区域。
• 底部导航栏，可以展示其他内容，但现在我们先空着。

我们先尝试构建导航栏，简单点，就是用 AppBar 来做，很简单，一行代码：

AppBar(
  title: Text('名言金句'),
),

接下来继续写我们的骨架，我们需要展示内容，那就用最普通的 ListView 来做，有以下代码：

ListView(
  children: [
    Text('加载中...'),
  ],
),

然后我们再在按钮里绑定事件，按下这个按钮，就会去请求我们的 API，拿到数据后我们再把数据展示出来，在这里我们用的 FutureBuilder 来做，因为网络请求是异步的，所以代码里用的是 FutureBuilder。

FutureBuilder(
  future: _fetchQuotes(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return Text(snapshot.data[index].quoteText);
        },
      );
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }

    // 请求未完成时显示内容
    return Text('加载中...');
  },
)

看上去好难的样子，但是不要慌，首先我们看看这个 _fetchQuotes()，这个函数就是请求网络的，但它是用另一个更底层的方法写的，可以暂时不关心，我们只需要知道它能帮我们请求到网络数据就可以了。

我们来看看 ListView.builder()，它需要三个参数，itemCount 就是我们拿到数据的长度，itemBuilder 就是用来把数据渲染成页面的，只要按照它的格式写就可以了。

获取数据

好的，现在我们数据的来源，就是从网上获取，因此我们需要请求数据，这里面最关键的一个知识点是，我们需要添加依赖：http。

import 'package:http/http.dart' as http;

有了它，我们就可以请求数据了，比如我们需要请求：

final response = await http.get(Uri.parse('https://api.quotable.io/random'));

那么请求后的数据格式是这样的：

{
  "quoteText": "Judge a man by his questions rather than his answers.",
  "quoteAuthor": "Voltaire"
}

这个格式是 JSON，这也是我们需要添加的依赖，写法如下：

import 'dart:convert';

我们可以把数据转换成 Map 的形式，这样写：

Map<String, dynamic> quote = jsonDecode(response.body);

这样我们就可以直接访问这两个字段：quoteText 和 quoteAuthor，它是一个字符串，我们可以直接打印出来了，这样就可以展示了。

现在你已经成功地用 Flutter 创建了一个名言金句应用，并学会了进行 API 请求。希望这对你有所帮助！