当setState Flutter时，PageViewer内的小部件没有改变

Question

我试图在pageviewer中更改我的小部件，当我点击容器时。但是容器没有改变颜色，我的打印功能正常工作。

这里是我的PageViewer代码

PageView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  controller: _controller,
                  itemCount: _samplePages.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _samplePages[index % _samplePages.length];
                  },
                ),

这里是我的容器代码

Widget page2() {
Color containerColor = Colors.blue;
return Center(
  child: Padding(
    padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
    child: Container(
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(15)),
      child: Column(
        children: <Widget>[
          InkWell(
            onTap: () {
              setState(() {
                containerColor = Colors.red;
                print('changed');
              });
            },
            child: AnimatedContainer(
              width: 100,
              height: 100,
              color: containerColor,
              duration: Duration(seconds: 1),
            ),
          )
        ],
      ),
    ),
  ),
);

}

已更改打印，但是容器颜色仍然是蓝色。有人可以告诉我我的错误在哪里吗？

感谢。

UPDATE：

这里是我的完整代码：

class _AddCustomerState extends State<AddCustomer> {


int currentPage = 1;

  Color containerColor = Colors.blue;
  bool isLoading = false;

  Widget page1() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
          child: Padding(
            padding: const EdgeInsets.all(25.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Page 1')
               ],
            ),
          ),
        ),
      ),
    );
  }

  Widget page2() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
          child: Column(
            children: <Widget>[
              InkWell(
                onTap: () {
                  setState(() {
                    containerColor = Colors.red;
                    print('changed');
                  });
                },
                child: AnimatedContainer(
                  width: 100,
                  height: 100,
                  color: containerColor,
                  duration: Duration(seconds: 1),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget page3() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
        ),
      ),
    );
  }

  Widget page4() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
        ),
      ),
    );
  }

  Widget page5() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
        ),
      ),
    );
  }

  List<Widget> _samplePages;

  @override
  void initState() {
    setState(() {
      _samplePages = [
              page1(),
              page2(),
              page3(),
              page4(),
              page5(),
            ];
    });
    super.initState();
  }

  final _controller = new PageController();
  static const _kDuration = const Duration(seconds: 1);
  static const _kCurve = Curves.ease;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 30,
            ),
            Padding(
              padding: EdgeInsets.only(top: 50),
              child: Text(
                'ADD CUSTOMER',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 25,
                    fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            AnimatedContainer(
              duration: Duration(milliseconds: 700),
              width: 600,
              height: currentPage == 4 ? 600 : 450,
              child: isLoading
                  ? SpinKitCircle(
                      size: 30,
                      color: Colors.white,
                    )
                  : PageView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      controller: _controller,
                      itemCount: _samplePages.length,
                      itemBuilder: (BuildContext context, int index) {
                        return _samplePages[index % _samplePages.length];
                      },
                    ),
            ),
            SizedBox(
              height: 30,
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 25.0),
              child: Container(
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        setState(() {
                          if (currentPage > 1) {
                            currentPage--;
                          }
                        });
                        _controller.previousPage(
                            duration: _kDuration, curve: _kCurve);
                      },
                      child: Container(
                        height: 60,
                        width: 200,
                        child: Center(
                            child: Text(
                          currentPage == 1 ? 'Back' : 'Prev',
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 18),
                        )),
                        decoration: BoxDecoration(
                            color: Theme.of(context).accentColor,
                            borderRadius: BorderRadius.circular(30)),
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        _controller.nextPage(
                            duration: _kDuration, curve: _kCurve);
                        setState(() {
                          if (currentPage < 5) {
                            currentPage++;
                          }
                        });
                      },
                      child: Container(
                        height: 60,
                        width: 200,
                        child: Center(
                            child: Text(currentPage > 4 ? 'Confirm' : 'Next',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18))),
                        decoration: BoxDecoration(
                            color: Theme.of(context).accentColor,
                            borderRadius: BorderRadius.circular(30)),
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

您必须将Color containerColor = Colors.blue;从Widget page2()中移出因为每次将小部件重新构建回Colors.blue

代码段

Color containerColor = Colors.blue;

Widget page2() {

    return Center(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 25),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
          child: Column(
            children: <Widget>[
              InkWell(
                onTap: () {
                  setState(() {
                    containerColor = Colors.red;
                    print('changed');
                  });
                },
                child: AnimatedContainer(
                  width: 100,
                  height: 100,
                  color: containerColor,
                  duration: Duration(seconds: 1),
                ),
              )
            ],
          ),
        ),
      ),
    );
}

Answer 2

采用此行：Color containerColor = Colors.blue;从Widget page2() {

中>

原因：您调用setState-> setState调用build（）->构建调用page2（）-> page2（）集containerColor = Colors.blue.

因此，变量containerColor应该不在您的page2()中