2020-08-07

最新推荐文章于 2024-01-16 16:14:33 发布

原创最新推荐文章于 2024-01-16 16:14:33 发布 · 251 阅读

CC 4.0 BY-SA版权

本文深入探讨了Flutter中FutureBuilder组件的正确使用方法，包括如何避免不必要的UI重绘，解决由状态改变引起的页面刷新问题，以及如何处理异步数据请求和渲染。通过具体代码示例，展示了如何使用FutureBuilder构建高效、响应式的用户界面。

1Exception caught by gesture flutter

range inclusive

手势异常原因是列表中的某个

点击时间的时候写错了导致无法响应并报错

2.FutureBuilder引发多次异步请求和多次渲染引发问题

https://blog.youkuaiyun.com/u011272795/article/details/83010974

var _futureBuilderFuture;
...

@override
void initState() { 
    ///用_futureBuilderFuture来保存_gerData()的结果，以避免不必要的ui重绘
    _futureBuilderFuture = _gerData();
  }
...

FutureBuilder(
  future: _futureBuilderFuture ,
  ....

/*
* Created by 李卓原 on 2018/9/30.
* email: zhuoyuan93@gmail.com
* 关于状态改变引起的不必要的页面刷新：https://github.com/flutter/flutter/issues/11426#issuecomment-414047398
*/

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_app/utils/HttpUtil.dart';

class FutureBuilderPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => FutureBuilderState();
}

class FutureBuilderState extends State<FutureBuilderPage> {
 String title = 'FutureBuilder使用';
 var _futureBuilderFuture;

 Future _gerData() async {
   var response = HttpUtil()
       .get('http://api.douban.com/v2/movie/top250', data: {'count': 15});
   return response;
 }

 @override
 void initState() {
   // TODO: implement initState
   super.initState();

   ///用_futureBuilderFuture来保存_gerData()的结果，以避免不必要的ui重绘
   _futureBuilderFuture = _gerData();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(title),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () {
         setState(() {
           title = title + '.';
         });
       },
       child: Icon(Icons.title),
     ),
     body: RefreshIndicator(
       onRefresh: _gerData,
       child: FutureBuilder(
         builder: _buildFuture,
         future:
             _futureBuilderFuture, // 用户定义的需要异步执行的代码，类型为Future<String>或者null的变量或函数
       ),
     ),
   );
 }

 ///snapshot就是_calculation在时间轴上执行过程的状态快照
 Widget _buildFuture(BuildContext context, AsyncSnapshot snapshot) {
   switch (snapshot.connectionState) {
     case ConnectionState.none:
       print('还没有开始网络请求');
       return Text('还没有开始网络请求');
     case ConnectionState.active:
       print('active');
       return Text('ConnectionState.active');
     case ConnectionState.waiting:
       print('waiting');
       return Center(
         child: CircularProgressIndicator(),
       );
     case ConnectionState.done:
       print('done');
       if (snapshot.hasError) return Text('Error: ${snapshot.error}');
       return _createListView(context, snapshot);
     default:
       return Text('还没有开始网络请求');
   }
 }

 Widget _createListView(BuildContext context, AsyncSnapshot snapshot) {
   List movies = snapshot.data['subjects'];
   return ListView.builder(
     itemBuilder: (context, index) => _itemBuilder(context, index, movies),
     itemCount: movies.length * 2,
   );
 }

 Widget _itemBuilder(BuildContext context, int index, movies) {
   if (index.isOdd) {
     return Divider();
   }
   index = index ~/ 2;
   return ListTile(
     title: Text(movies[index]['title']),
     leading: Text(movies[index]['year']),
     trailing: Text(movies[index]['original_title']),
   );
 }
}