编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

OkHttp 在 Flutter中的运用场景,Flutter语言连接网络的方法介绍

wxchong 2024-06-10 17:04:12 开源技术 17 ℃ 0 评论

Flutter 中使用流行的 http 包 进行网络请求是很简单的。

虽然 http 包没有 OkHttp 中的所有功能,但是它抽象了很多通常你会自己实现的网络功能,这使其本身在执行网络请求时简单易用。

如果要使用 http 包,需要在 pubspec.yaml 文件中添加依赖:

如果要发起一个网络请求,在异步 (async) 方法 http.get() 上调用 await 即可:

如何为耗时任务显示进度?

在 Android 中你通常会在后台执行一个耗时任务的时候显示一个 ProgressBar 在界面上。

在 Flutter 中,我们使用 ProgressIndicator Widget。通过代码逻辑使用一个布尔标记值控制进度条的渲染。

在下面的例子中,build 方法被拆分成三个不同的方法。如果 showLoadingDialog() 返回 true(当 widgets.length == 0),渲染 ProgressIndicator。否则,在 ListView 里渲染网络请求返回的数据。

content_copy

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
 runApp(SampleApp());
}
class SampleApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Sample App',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: SampleAppPage(),
 );
 }
}
class SampleAppPage extends StatefulWidget {
 SampleAppPage({Key key}) : super(key: key);
 @override
 _SampleAppPageState createState() => _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
 List widgets = [];
 @override
 void initState() {
 super.initState();
 loadData();
 }
 showLoadingDialog() {
 return widgets.length == 0;
 }
 getBody() {
 if (showLoadingDialog()) {
 return getProgressDialog();
 } else {
 return getListView();
 }
 }
 getProgressDialog() {
 return Center(child: CircularProgressIndicator());
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("Sample App"),
 ),
 body: getBody());
 }
 ListView getListView() => ListView.builder(
 itemCount: widgets.length,
 itemBuilder: (BuildContext context, int position) {
 return getRow(position);
 });
 Widget getRow(int i) {
 return Padding(padding: EdgeInsets.all(10.0), child: Text("Row ${widgets[i]["title"]}"));
 }
 loadData() async {
 String dataURL = "https://jsonplaceholder.typicode.com/posts";
 http.Response response = await http.get(dataURL);
 setState(() {
 widgets = json.decode(response.body);
 });
 }
}

以上算是Flutter 当中请求网络,然后添加加载进度框的方法,码子不易,如果你也在学习Flutter,可以点赞、关注、收藏我,后续一直写Flutter相关的文章

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表