面试题：Flutter异步加载懒加载策略的基本实现

Question

在Flutter中，简述如何通过`FutureBuilder`结合懒加载策略来优化初始化性能，假设你有一个需要异步获取数据的列表页面，描述关键代码实现步骤。

Answer 1

1. 定义异步数据获取函数：

   Future<List<dynamic>> fetchData() async {
     // 模拟异步操作，例如从网络请求数据
     await Future.delayed(const Duration(seconds: 2));
     return ['data1', 'data2', 'data3'];
   }
   

2. 在StatefulWidget中使用FutureBuilder：

   class LazyLoadListPage extends StatefulWidget {
     @override
     _LazyLoadListPageState createState() => _LazyLoadListPageState();
   }
   
   class _LazyLoadListPageState extends State<LazyLoadListPage> {
     late Future<List<dynamic>> futureData;
   
     @override
     void initState() {
       super.initState();
       // 懒加载，在页面初始化时不立即获取数据，可在合适时机（如用户滚动到一定位置）触发
       futureData = fetchData();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('Lazy Load List'),
         ),
         body: FutureBuilder<List<dynamic>>(
           future: futureData,
           builder: (context, snapshot) {
             if (snapshot.connectionState == ConnectionState.waiting) {
               return const Center(child: CircularProgressIndicator());
             } else if (snapshot.hasError) {
               return Center(child: Text('Error: ${snapshot.error}'));
             } else {
               final data = snapshot.data!;
               return ListView.builder(
                 itemCount: data.length,
                 itemBuilder: (context, index) {
                   return ListTile(
                     title: Text(data[index].toString()),
                   );
                 },
               );
             }
           },
         ),
       );
     }
   }
   

3. 实现懒加载触发（以滚动触发为例）：
   • 可使用ScrollController监听滚动事件。

   class _LazyLoadListPageState extends State<LazyLoadListPage> {
     late Future<List<dynamic>> futureData;
     late ScrollController _scrollController;
   
     @override
     void initState() {
       super.initState();
       _scrollController = ScrollController();
       _scrollController.addListener(() {
         if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
           // 当滚动到列表底部时触发加载更多数据（这里可结合分页逻辑）
           setState(() {
             futureData = fetchData();
           });
         }
       });
     }
   
     @override
     void dispose() {
       _scrollController.dispose();
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       // 后续代码与上述类似
     }
   }
   

关键步骤总结：

1. 定义异步获取数据的函数。
2. 在StatefulWidget的initState中延迟初始化Future对象。
3. 使用FutureBuilder根据异步操作的状态来构建界面，显示加载中的指示器、错误信息或数据列表。
4. 可结合ScrollController等方式实现懒加载触发逻辑，如滚动到列表底部加载更多数据。