Flutter Web页面返回不刷新及Container嵌套页面问题咨询

问题1：返回页面时避免FutureBuilder重新拉取数据 #

问题出在你直接在build方法内创建Future.wait([restaurantData, foodData, drinkData])，每次页面重建（包括返回操作触发的重建）都会重新执行这个Future。以下是两种可行的解决方式：

方法1：将Future初始化移到State生命周期方法中 #

把数据加载的Future放到initState里，确保仅在页面初始化时执行一次：

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late Future<List<dynamic>> _loadDataFuture;

  @override
  void initState() {
    super.initState();
    // 仅在页面首次初始化时触发数据加载
    _loadDataFuture = Future.wait([restaurantData, foodData, drinkData]);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _loadDataFuture, // 使用提前初始化好的Future
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Loader();
        } else if (snapshot.hasError || !snapshot.hasData || snapshot.data![0].isEmpty) {
          return NoRestaurantPage();
        } else {
          return MainRestaurantPage(
            restaurants: snapshot.data![0],
            foods: snapshot.data![1],
            drinks: snapshot.data![2],
          );
        }
      },
    );
  }
}

方法2：用状态管理缓存数据 #

如果你的应用使用全局状态管理（比如Provider、Riverpod、Bloc），可以把数据缓存到状态类中，避免重复请求：

// 以Riverpod为例
final restaurantDataProvider = FutureProvider<List<Restaurant>>((ref) async {
  // 该请求只会执行一次，Riverpod会自动缓存结果
  return fetchRestaurants();
});

class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final restaurantData = ref.watch(restaurantDataProvider);
    final foodData = ref.watch(foodDataProvider);
    final drinkData = ref.watch(drinkDataProvider);

    // 判断是否还有数据在加载
    final isLoading = [restaurantData, foodData, drinkData].any((state) => state.isLoading);
    if (isLoading) {
      return Loader();
    }

    final restaurants = restaurantData.valueOrNull;
    final foods = foodData.valueOrNull;
    final drinks = drinkData.valueOrNull;
    if (restaurants == null || foods == null || drinks == null || restaurants.isEmpty) {
      return NoRestaurantPage();
    }

    return MainRestaurantPage(restaurants: restaurants, foods: foods, drinks: drinks);
  }
}

问题2：返回独立页面而非嵌套组件 #

你不需要在FutureBuilder里用Container包裹MainRestaurantPage，可以通过以下两种方式实现独立页面效果：

方法1：让FutureBuilder作为页面根节点，直接返回页面组件 #

把FutureBuilder放在页面的根层级，加载完成后直接返回MainRestaurantPage，无需额外嵌套容器：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder(
      future: _loadDataFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Loader();
        } else if (snapshot.hasError || !snapshot.hasData || snapshot.data![0].isEmpty) {
          return NoRestaurantPage();
        } else {
          // 直接返回MainRestaurantPage，它会占满整个页面空间
          return MainRestaurantPage(
            restaurants: snapshot.data![0],
            foods: snapshot.data![1],
            drinks: snapshot.data![2],
          );
        }
      },
    ),
  );
}

方法2：加载完成后跳转至独立路由页面 #

如果希望MainRestaurantPage是完全独立的路由，可以在数据加载完成后用Navigator.pushReplacement跳转：

class SplashPage extends StatefulWidget {
  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    _loadDataAndNavigate();
  }

  Future<void> _loadDataAndNavigate() async {
    try {
      final data = await Future.wait([restaurantData, foodData, drinkData]);
      if (data[0].isEmpty) {
        Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => NoRestaurantPage()));
      } else {
        Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => MainRestaurantPage(
          restaurants: data[0],
          foods: data[1],
          drinks: data[2],
        )));
      }
    } catch (e) {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => NoRestaurantPage()));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Loader();
  }
}

这种方式下，MainRestaurantPage是独立的路由页面，不存在嵌套问题，顶部也不会出现多余边距。

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