如何在Flutter中让FloatingActionButton操作PageView当前页面

下面提供两种实用方案，根据你的场景选择即可：

方案一：使用GlobalKey直接访问页面状态 #

适合页面数量不多、逻辑简单的场景，通过GlobalKey获取子页面的State实例，调用其暴露的方法。

步骤1：修改子页面，暴露状态和方法 #

以ModelsPage为例，添加GlobalKey并在State类中定义公共方法：

import 'package:flutter/material.dart';

class ModelsPage extends StatefulWidget {
  // 创建GlobalKey供外部访问State
  final GlobalKey<_ModelsPageState> pageKey = GlobalKey<_ModelsPageState>();

  const ModelsPage({super.key});

  @override
  State<ModelsPage> createState() => _ModelsPageState();
}

class _ModelsPageState extends State<ModelsPage> {
  int count = 0;

  // 暴露公共方法，供外部调用更新状态
  void incrementCount() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        shadowColor: Colors.black,
        foregroundColor: Theme.of(context).appBarTheme.foregroundColor,
        title: const Text('Models Page'),
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          IconButton(icon: const Icon(Icons.add_to_photos), onPressed: () {}),
        ],
      ),
      body: Center(
        child: Text('Models count $count',
            style: const TextStyle(color: Colors.amber, fontSize: 20))),
    );
  }
}

HomePage同理修改，添加GlobalKey和addItem方法：

class HomePage extends StatefulWidget {
  final GlobalKey<_HomePageState> pageKey = GlobalKey<_HomePageState>();

  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> items = [];

  void addItem() {
    setState(() {
      items.add('New Item ${items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) => ListTile(title: Text(items[index])),
      ),
    );
  }
}

步骤2：主页面中保存页面实例，FAB根据当前页码调用对应方法 #

初始化页面时保存实例，方便后续获取GlobalKey：

// 初始化页面实例，保存GlobalKey
final homePage = HomePage();
final modelsPage = ModelsPage();

final Map<int, Widget> pagesMap = {
  0: homePage,
  1: modelsPage,
  3: const StudiosPage(),
  4: const ShootsPage(),
};

修改FAB的onPressed逻辑：

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.amber,
  splashColor: Colors.amberAccent,
  onPressed: () {
    int currentIndex = controller.page?.round() ?? 0;
    switch(currentIndex) {
      case 0:
        // 调用HomePage的添加方法
        homePage.pageKey.currentState?.addItem();
        break;
      case 1:
        // 调用ModelsPage的计数递增方法
        modelsPage.pageKey.currentState?.incrementCount();
        break;
      // 其他页面可添加对应处理逻辑
    }
  },
  tooltip: 'Increment',
  shape: const CircleBorder(),
  child: const Icon(Icons.add, color: Colors.black),
),

方案二：使用ValueNotifier实现状态共享 #

适合页面较多或需要跨组件共享状态的场景，状态与页面解耦，维护性更强。

步骤1：在主页面定义全局状态Notifier #

// 定义ModelsPage的计数状态
final ValueNotifier<int> modelsCountNotifier = ValueNotifier(0);
// 定义HomePage的列表状态
final ValueNotifier<List<String>> homeItemsNotifier = ValueNotifier([]);

步骤2：子页面通过ValueListenableBuilder监听状态 #

修改ModelsPage为无状态组件，监听状态变化：

class ModelsPage extends StatelessWidget {
  const ModelsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        shadowColor: Colors.black,
        foregroundColor: Theme.of(context).appBarTheme.foregroundColor,
        title: const Text('Models Page'),
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          IconButton(icon: const Icon(Icons.add_to_photos), onPressed: () {}),
        ],
      ),
      body: Center(
        child: ValueListenableBuilder<int>(
          valueListenable: modelsCountNotifier,
          builder: (context, count, child) {
            return Text('Models count $count',
                style: const TextStyle(color: Colors.amber, fontSize: 20));
          },
        ),
      ),
    );
  }
}

HomePage同理修改：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder<List<String>>(
        valueListenable: homeItemsNotifier,
        builder: (context, items, child) {
          return ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) => ListTile(title: Text(items[index])),
          );
        },
      ),
    );
  }
}

步骤3：FAB中更新对应状态 #

修改FAB的onPressed逻辑：

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.amber,
  splashColor: Colors.amberAccent,
  onPressed: () {
    int currentIndex = controller.page?.round() ?? 0;
    switch(currentIndex) {
      case 0:
        // 更新HomePage的列表状态
        homeItemsNotifier.value = [...homeItemsNotifier.value, 'New Item ${homeItemsNotifier.value.length + 1}'];
        break;
      case 1:
        // 更新ModelsPage的计数状态
        modelsCountNotifier.value += 1;
        break;
    }
  },
  tooltip: 'Increment',
  shape: const CircleBorder(),
  child: const Icon(Icons.add, color: Colors.black),
),

方案对比 #

• GlobalKey方案：实现简单，直接关联页面实例，适合页面少、逻辑简单的场景；缺点是页面间耦合度高，不易维护。
• ValueNotifier方案：状态与页面解耦，适合复杂场景或多组件共享状态；代码更整洁，扩展性强。

内容的提问来源于stack exchange，提问作者Evan R.