颤振 - 使用抽屉子小部件 onTap 更改子小部件答案

【问题标题】：flutter - change child widget with drawer child widget onTap颤振 - 使用抽屉子小部件 onTap 更改子小部件
【发布时间】：2019-09-14 09:39:52
【问题描述】：

我是flutter 初学者。我的主页分为 2 个自定义小部件，top 小部件和 page 小部件。我有一个带有几个按钮的抽屉，可以更改 page 小部件的内容。

我关注this tutorial 并尝试根据单击按钮来交换小部件。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var currentpage = 'landing';

    Widget pageWidget;

    switch (currentpage) {
      case 'landing':
        pageWidget = new Landing();
        break;
      case 'visitors':
        pageWidget = new Visitors();
        break;
      default:
    }

return Scaffold(
body:new Container(
child: Container(
    child: Column(
      children: <Widget>[
        Header(), ///<-- widget declared in separated .dart file
        pageWidget
      ],
    )
    )
drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text(
                "UserN3",
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.black54),
              ),
            ),
            new GestureDetector(
              onTap: (){
                print("landing");

                Future.delayed(Duration.zero,(){
                  setState(() {
                    currentpage = 'landing';
                  });
                });
              },
              child: new Text("landing"),
            ),
            new GestureDetector(
              onTap: (){
                print("visitors");
                Future.delayed(Duration.zero,(){
                  setState(() {
                    currentpage = 'visitors';
                  });
                });        
              },

              child: new Text("Visitors"),
            ),
          ],
        ),
      ),
);
}

所以要点是：

我在构建中有switch case，它将根据currentpage相应地更改pageWidget，这将通过抽屉中的按钮进行更改。

但不断收到同样的错误：

引发了另一个异常：在小部件树被锁定时调用了 setState() 或 markNeedsBuild()。

如您所见，我根据this suggestion 添加了Future.delayed()，但错误仍然存在。

经过一番研究，我感觉这与drawer如何处理setState()有关，但我不确定如何。

显然，我仍然不明白 flutter 在 build 和 state 方面的工作原理。

似乎是什么问题，我该如何解决？

【问题讨论】：

标签： android dart flutter

【解决方案1】：

您应该在build 方法之外声明您的currentPage 变量，因为每次调用setState 时都会再次调用build 方法并且变量不会改变。

所以移动这个：

Widget build(BuildContext context) {
  var currentpage = 'landing';

到这里：

var currentpage = 'landing';

Widget build(BuildContext context) {

【讨论】：