The first time I started to write a program with FLUTTER, I used this program mainly to replace the data of flutter- Go rotation chart, it wrote the data to local. Flutter feels a little different after using Vue and Android. Read a few introductory articles about Flutter, the learning template for Flutter provided by Clone Ary. I am very intentional, I just want to see what the crawler uses to write with flutter. It happens that the search of flutter- Go is crawling 360 searches, but flutter- Go encapsulating this function is a little difficult for me to get started, and I am a little lazy myself. H9t.hanju. Cc /, the following is the process of writing this program:
Flutter plug-in
Mainly go to the pub. Flutter – IO. Cn/website to find some add-ons for use and installation. Crawler plugin: HTML. Here is my code for the flutter, which crawls the data of h9t.hanju. Cc/and returns res:
Future<List<StoryModel>> suggestion() async {
var response = await dio.get("http://h9t.hanju.cc/");
var document = parse(response.data);
var app = document.querySelector(".slide-pic").querySelectorAll("li");
// print('app====>${app}');
List<StoryModel> res = [];
app.forEach((f) {
res.add(
StoryModel(
1,
f.querySelector("a").attributes["title"],
image: f.querySelector("img").attributes["src"],
url: f.querySelector("a").attributes["href"])); });return Future.delayed(Duration(seconds: 2), () {
return res;
});
Copy the code
Future
When you see a new Future, citing blog www.jianshu.com/p/890df7ea8… Explanation: A future is simply a Future object, and when you return await… This Future object is built into Dart and has its own queue policy. Events that it will operate on are placed in an EventQueue. Events in the queue are processed one by one on a first-in, first-out basis. Return the result to the Future object. And then I think to myself, I can use it like this:
List<StoryModel> bannerStories1 = api.suggestion() ;
Copy the code
But this is the error of the code is good at imitation, I went to see other blogs use, finally use this is successful:
List<StoryModel> bannerStories=[];
Future _setItem() async{
List<StoryModel> bannerStories = await api.suggestion() ;
print(bannerStories.length);
}
Copy the code
BannerStories. Length is greater than 0, but if you just use bannerStories somewhere else, it’s 0, the problem with the life cycle, it takes time to call the network, you call the original data of course is 0, Even if bannerStories requests data to change, the control page does not. Finally, I thought I had read an article juejin.cn/post/684490… There are two statefulwidgets and statelessWidgets mentioned for Flutter, and they are used differently. The state of a StatefulWidget can change during the lifetime of the widget. The state of the StatelessWidget itself does not change. Read this article for details. At the same time, I found that the control that wrote the wheel map inherited the StatelessWidget, and THEN I switched to the StatefulWidget. Use setState to notify the control that the data has changed.
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'dart:async';
import './home_banner.dart';
import '.. /model/story.dart';
import '.. /blocs/hanwang_api.dart';
class Pagination extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return newHomeState(); }}class HomeState extends State<Pagination> {
@override
void initState() {
// TODO: implement initState
super.initState();
_setItem();
}
void _launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url'; }}List<StoryModel> bannerStories=[];
Future _setItem() async{
List<StoryModel> bannerStories1 = await api.suggestion() ;
print(bannerStories.length);
setState(() {
bannerStories = bannerStories1;// The notification control changes data
});
}
List<Widget> _pageSelector(BuildContext context){
List<Widget> list = [];
if (bannerStories.length > 0) {
list.add(HomeBanner(bannerStories, (story) {
_launchURL('${story.url}');
}));
}
return list;
}
@override
Widget build(BuildContext context) {
return
Column(
key:Key('__header__'), children: _pageSelector(context) ); }}Copy the code
The site is using GB2312 encoding format has a garbled situation, I did not find the corresponding plug-in to solve the page.
Nuggets can not upload GIF, you can go to my CSDN to check blog.csdn.net/qq_34414578… At this time, you will have a general understanding of flutter. Follow this process and you can learn more about flutter. If there are mistakes, please correct them.