Flutter Dialog中onPageChanged联动页面指示器失效问题排查

你调用的setState属于打开Dialog的父页面，而Dialog是独立的弹窗上下文，这个setState只能触发父页面的UI重建，无法刷新Dialog内部的内容。所以虽然activePage值已经同步，但指示器不会跟着更新。

需要在Dialog内部维护状态，用Dialog专属的状态更新方法来刷新指示器，这里提供两种简单实现方式：

方式一：用StatefulBuilder包裹Dialog内容 #

StatefulBuilder可以在Dialog内部创建局部状态，调用它的setState只会刷新Dialog内的UI：

Future openDialog() => showDialog(
  context: context,
  builder: (BuildContext context) => Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        backgroundColor: const Color(0xFF64748b),
        child: StatefulBuilder(
          builder: (context, dialogSetState) {
            // 将activePage移到Dialog内部维护，避免和父页面状态耦合
            int activePage = 0;
            return Container(
              height: 300.0,
              width: 300.0,
              child: Column(
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 200,
                    child: PageView.builder(
                      scrollDirection: Axis.horizontal,
                      pageSnapping: true,
                      itemCount: eqs.length,
                      controller: _pageController,
                      onPageChanged: (page) {
                        dialogSetState(() {
                          activePage = page;
                        });
                      },
                      itemBuilder: (context, index) {
                        final titles = eqs[index];
                        return Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              padding: const EdgeInsets.all(15.0),
                              child: Text(
                                titles.eqTitle,
                                style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 17,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: Math.tex(
                                titles.eq,
                                mathStyle: MathStyle.display,
                                textStyle: const TextStyle(
                                  color: Colors.white,
                                  fontSize: 17,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                  Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: indicators(eqs.length, activePage))
                ],
              ),
            );
          },
        ),
      ));

List<Widget> indicators(eqsLength, currentIndex) {
 return List<Widget>.generate(eqsLength, (index) {
   return Container(
     margin: const EdgeInsets.all(5.0),
     width: 10,
     height: 10,
     decoration: BoxDecoration(
     color: currentIndex == index ? Colors.greenAccent : Colors.black26,
     shape: BoxShape.circle),
      );
    });
}

方式二：抽成独立的StatefulWidget #

把Dialog里的页面内容单独写成一个StatefulWidget，状态管理更清晰，适合复杂弹窗场景：

// 独立的弹窗内容Widget
class DialogPageContent extends StatefulWidget {
  final List eqs;
  final PageController pageController;

  const DialogPageContent({Key? key, required this.eqs, required this.pageController}) : super(key: key);

  @override
  State<DialogPageContent> createState() => _DialogPageContentState();
}

class _DialogPageContentState extends State<DialogPageContent> {
  int activePage = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300.0,
      width: 300.0,
      child: Column(
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: PageView.builder(
              scrollDirection: Axis.horizontal,
              pageSnapping: true,
              itemCount: widget.eqs.length,
              controller: widget.pageController,
              onPageChanged: (page) {
                setState(() {
                  activePage = page;
                });
              },
              itemBuilder: (context, index) {
                final titles = widget.eqs[index];
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      padding: const EdgeInsets.all(15.0),
                      child: Text(
                        titles.eqTitle,
                        style: const TextStyle(
                            color: Colors.white,
                            fontSize: 17,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Math.tex(
                        titles.eq,
                        mathStyle: MathStyle.display,
                        textStyle: const TextStyle(
                          color: Colors.white,
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: indicators(widget.eqs.length, activePage))
        ],
      ),
    );
  }

  List<Widget> indicators(eqsLength, currentIndex) {
    return List<Widget>.generate(eqsLength, (index) {
      return Container(
        margin: const EdgeInsets.all(5.0),
        width: 10,
        height: 10,
        decoration: BoxDecoration(
            color: currentIndex == index ? Colors.greenAccent : Colors.black26,
            shape: BoxShape.circle),
      );
    });
  }
}

// 调用Dialog的方法
Future openDialog() => showDialog(
  context: context,
  builder: (BuildContext context) => Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        backgroundColor: const Color(0xFF64748b),
        child: DialogPageContent(eqs: eqs, pageController: _pageController),
      ));

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