FLutte 使用网络请求框架dio获取豆瓣电影网的电影信息

10/18 08:41
阅读数 32

FLutter 使用网络请求框架dio获取豆瓣电影网的电影信息

1. 添加依赖

进入dio pub.dev主页
一、点击installing
在这里插入图片描述二、复制dio: ^3.0.10到图下位置
在这里插入图片描述


三、Ctrl+s保存 右键点击pubspec.yaml文件选择Flutter > Flutter Packages Get
在这里插入图片描述到这里 依赖就已经添加完成

2. 代码部分

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
void main()=>runApp(Myapp());

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: MyFullWidget(),
        ),
      ),
    );
  }
}

class VideoItem{
  String name;
  String cover;
  String rate;
  VideoItem({this.name,this.cover,this.rate}):super();
}



class MyFullWidget extends StatefulWidget{
  @override
  State<MyFullWidget> createState(){
    return MyFullWidgetState();
  }
}
class MyFullWidgetState extends State<MyFullWidget> {

  List <VideoItem> datas = List<VideoItem>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: ListTile(
                leading: Image.network(datas[index].cover),
                subtitle: Text(datas[index].rate, style: TextStyle(
                    color: Colors.blue,
                    fontSize: 15,
                    fontWeight: FontWeight.w600),),
                title: Text(datas[index].name,
                  style: TextStyle(color: Colors.black, fontSize: 20),),
              ),
            );
          },
          itemCount: datas.length,
        )
    );
  }


  @override
  void initState(){
  //下面的链接豆瓣保存电影信息的链接,会实时更新
    Dio().get("https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&page_start=0").then((response){
      Map data=response.data;
      List subjects=data["subjects"];
      this.datas.clear();
      subjects.forEach((item) {
        this.datas.add(
            VideoItem(
                name: item["title"],
                cover: item["cover"],
                rate:item["rate"]
            )
        );
      });
      setState(() {});
    });
  }
}

3.效果图

在这里插入图片描述
求三连呜呜呜

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部