Flutter中基于API返回值让PageView.builder跳至指定初始页

核心思路 #

1. 避免FutureBuilder重复发起API请求：将API请求的Future对象在initState中初始化，而非直接在build方法内调用，防止每次组件重建都重复请求。
2. 计算初始页面索引：从获取到的标记列表中，找到第一个值为'0'的元素索引，作为PageView的初始显示页面。
3. 使用PageController控制初始页面：通过PageController的initialPage参数设置初始显示的页面，同时保留所有页面供用户左右滑动查看。

修改后的完整代码 #

import 'package:flutter/material.dart';

class ScreenForBuilder extends StatefulWidget {
  const ScreenForBuilder({Key? key}) : super(key: key);

  @override
  State<ScreenForBuilder> createState() => _ScreenForBuilderState();
}

class _ScreenForBuilderState extends State<ScreenForBuilder> {
  List<String> isCompleted = [];
  late Future<List<String>> _apiFuture; // 存储API请求的Future对象

  @override
  void initState() {
    super.initState();
    _apiFuture = apiCallFunction(); // 在initState中初始化请求，避免重复调用
  }

  Future<List<String>> apiCallFunction() async {
    // 模拟API请求，实际替换为真实接口调用
    await Future.delayed(const Duration(seconds: 1));
    isCompleted = ['1','1','0','0'];
    return isCompleted;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: FutureBuilder<List<String>>(
          future: _apiFuture,
          builder: (context, snapshot) {
            // 处理加载状态
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            }
            // 处理错误状态
            if (snapshot.hasError) {
              return Center(child: Text('请求失败: ${snapshot.error}'));
            }
            // 数据加载完成
            if (snapshot.hasData) {
              final completedList = snapshot.data!;
              // 计算初始页面索引：找到第一个'0'的位置，默认0
              int initialPage = completedList.indexWhere((item) => item == '0');
              initialPage = initialPage == -1 ? 0 : initialPage;

              // 初始化PageController
              final pageController = PageController(initialPage: initialPage);

              return PageView.builder(
                controller: pageController,
                itemCount: completedList.length, // 使用真实列表长度，而非固定4
                itemBuilder: (context, index) {
                  return Center(
                    child: Text(
                      '${index+1}',
                      style: const TextStyle(fontSize: 50),
                    ),
                  );
                },
              );
            }
            // 默认空状态
            return const Center(child: Text('无数据'));
          },
        ),
      ),
    );
  }
}

关键修改说明 #

• 避免重复API请求：将apiCallFunction()的返回值赋值给_apiFuture并在initState中初始化，确保组件重建时不会重复发起请求。
• 初始索引计算：使用indexWhere方法快速定位第一个'0'的位置，若列表中没有'0'则默认显示第0页。
• PageController控制初始页面：通过PageController的initialPage参数直接设置初始显示的页面，既满足默认跳转到目标页面的需求，又保留了所有页面的滑动访问权限。
• 完善状态处理：补充了加载中、请求错误、无数据等状态的UI展示，提升用户体验。

内容的提问来源于stack exchange，提问作者Tahir