Flutter学习笔记：从请求数据到展示列表的从零入门过程

2023-09-05 23:14:59

Flutter学习笔记：从请求数据到展示列表的从零入门过程

1. 前言

Flutter是一个跨平台的应用开发框架，它允许开发者使用单一的代码库来构建iOS、Android、Web和桌面应用程序。Flutter在UI渲染方面表现优异，它使用Dart语言，Dart是一种面向对象的编程语言，具有简洁、易学、高效的特点。

在Flutter中，网络请求和列表渲染是两个非常常见的功能。网络请求允许Flutter应用程序从远程服务器获取数据，而列表渲染则允许应用程序以用户友好的方式展示数据。

2. 网络请求

在Flutter中，可以使用http包来发送网络请求。http包是一个Dart包，它提供了发送HTTP请求和处理HTTP响应的功能。

要使用http包，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  http: ^0.13.4

然后，可以在Dart代码中导入http包：

import 'package:http/http.dart';

接下来，就可以使用http包来发送网络请求了。发送网络请求的步骤如下：

创建一个Client对象。
使用Client对象发送请求。
处理请求的响应。

下面是一个发送网络请求的示例代码：

Future<Response> fetchPost() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // 请求成功，解析JSON响应
    return response;
  } else {
    // 请求失败，抛出异常
    throw Exception('Failed to load post');
  }
}

3. 列表渲染

在Flutter中，可以使用ListView来渲染列表。ListView是一个滚动列表控件，它可以显示一系列子项。

要使用ListView，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter

然后，可以在Dart代码中导入ListView：

import 'package:flutter/material.dart';

接下来，就可以使用ListView来渲染列表了。渲染列表的步骤如下：

创建一个ListView对象。
将子项添加到ListView中。
将ListView添加到Flutter应用程序中。

下面是一个渲染列表的示例代码：

Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(
      children: <Widget>[
        ListTile(
          title: Text('Item 1'),
        ),
        ListTile(
          title: Text('Item 2'),
        ),
        ListTile(
          title: Text('Item 3'),
        ),
      ],
    ),
  );
}

4. 结合网络请求和列表渲染

现在，我们可以将网络请求和列表渲染结合起来，构建一个完整的Flutter应用程序。

下面是一个完整的Flutter应用程序示例，它从网络获取数据并将其展示在列表中：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<List<Post>> _fetchPosts() async {
    final response = await http.get('https://jsonplaceholder.typicode.com/posts');

    if (response.statusCode == 200) {
      // 请求成功，解析JSON响应
      final List<dynamic> json = jsonDecode(response.body);
      return json.map((e) => Post.fromJson(e)).toList();
    } else {
      // 请求失败，抛出异常
      throw Exception('Failed to load posts');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: FutureBuilder(
        future: _fetchPosts(),
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data![index].title),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('${snapshot.error}'),
            );
          }

          // 请求正在进行中，显示加载指示器
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}