1.添加依赖
根目录下找到pubspec.yaml,这里用的dio,还蛮好用的,自己去dio官网找到版本,填上去保存就会自动下载
2.封装Http
根目录新建http文件夹,新建index.dart文件
index.dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
class Http {
static BaseOptions options = BaseOptions(
baseUrl: 'https://m.mi.com/v1/',
connectTimeout: 60000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Referer': 'https://m.mi.com/'
});
static Dio dio = Dio(options);
static get(
{@required String path,
Map<String, String> data = const {},
options}) async {
try {
Response response = await dio.get(path, queryParameters: addParam(data));
return response.data;
} on DioError catch (e) {
formatError(e);
}
}
static post(
{@required String path,
Map<String, String> data = const {},
options}) async {
try {
Response response = await dio.post(path, queryParameters: addParam(data));
if (response.statusCode == 200) {
return response.data['data'];
}
} on DioError catch (e) {
formatError(e);
}
}
static Map addParam(Map<String, String> data) {
data['client_id'] = "180100031051";
data['webp'] = "1";
return data;
}
/*
* error统一处理
*/
static void formatError(DioError e) {
if (e.type == DioErrorType.CONNECT_TIMEOUT) {
// It occurs when url is opened timeout.
print("连接超时");
} else if (e.type == DioErrorType.SEND_TIMEOUT) {
// It occurs when url is sent timeout.
print("请求超时");
} else if (e.type == DioErrorType.RECEIVE_TIMEOUT) {
//It occurs when receiving timeout
print("响应超时");
} else if (e.type == DioErrorType.RESPONSE) {
// When the server response, but with a incorrect status, such as 404, 503...
print("出现异常");
} else if (e.type == DioErrorType.CANCEL) {
// When the request is cancelled, dio will throw a error with this type.
print("请求取消");
} else {
//DEFAULT Default error type, Some other Error. In this case, you can read the DioError.error if it is not null.
print("未知错误");
}
}
}
至于api.dart,接口的封装。
const HOME_PAGE = '/home/page';
3.使用
home.dart
import 'package:flutter/material.dart';
import 'package:mi_shop/components/HeaderNav.dart';
import 'package:mi_shop/http/index.dart';
import 'package:mi_shop/http/api.dart';
import 'package:mi_shop/components/Nav.dart';
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new Page();
}
}
class Page extends State<Home> {
Map pageData = Map();
@override
void initState() { // 会自动调用,生命周期
requestAPI();
}
@override
Widget build(BuildContext context) {
return layout(context);
}
Widget layout(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
// appBar: new AppBar(
// title: new Text('Welcome to Home'),
// ),
body: new Container(
child: new Column(
children: <Widget>[
new HeaderNav(
left: Container(
child: Image(
image: new AssetImage('images/logo.png'),
height: 15,
),
),
content: Container(
decoration: new BoxDecoration(
border:
new Border.all(width: 1, color: Color(0xffe5e5e5)),
borderRadius: BorderRadius.all(Radius.circular(2.0))),
child: Scaffold(
body: Row(
children: <Widget>[
Container(
child: Icon(Icons.search,
color: Color(0x4D000000), size: 20),
margin: EdgeInsets.fromLTRB(5, 0, 3, 0),
),
Expanded(
child: new TextField(
decoration: new InputDecoration(
hintText: '搜索商品名称',
hintStyle: new TextStyle(
fontSize: 13.0, color: Color(0x4D000000)),
fillColor: Colors.white, // 背景颜色
filled: true, // 支持背景颜色
contentPadding:
const EdgeInsets.symmetric(vertical: 4),
border: OutlineInputBorder(
borderSide: BorderSide.none,
// borderSide: BorderSide(color: Color(0xffe5e5e5)),
borderRadius: BorderRadius.circular(3)),
),
),
),
],
),
),
),
right: Container(
child: Image(
image: new AssetImage('images/user.png'),
height: 18,
),
)),
new Nav(tabs: pageData)
],
),
)),
);
}
void requestAPI() async {
// 请求API数据
var res = await Http.post(path: HOME_PAGE, data: {'page_type': 'home'});
setState(() { // 发生改变时更新
pageData = res;
});
}
}
Nav.dart
import 'package:flutter/material.dart';
class Nav extends StatefulWidget {
final Map tabs;
Nav({Key key, this.tabs}) : super(key: key);
@override
createState() => new MyComponent();
}
class MyComponent extends State<Nav> {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 100,
child: new ListView(
scrollDirection: Axis.horizontal, children: handlerData()));
}
List<Widget> handlerData() {
List<Widget> items = [];
if (widget.tabs != null) {
for (var item in widget.tabs['tabs']) {
items.add(new Container(
child: new Text(item['name']),
));
}
}
return items;
}
}
Nav是封装组件,在components下