无法建立，因为frawework已经建立-Flutter

Question

我想在点击抽屉项时显示AlertDialog

我正在使用以下代码在Flutter应用中使用导航抽屉项

class HomePage extends StatefulWidget {
  final drawerItems = [
    DrawerItem("View Your account", Icons.account_circle),
    DrawerItem("Request", Icons.receipt),
    DrawerItem("Order", Icons.shopping_cart),
    DrawerItem("Report", Icons.report_problem),
    DrawerItem("Log out", Icons.info)
  ];

  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  int _selectedDrawerIndex = 0;
  bool visibilityTag = false;

  showAlertDialog(BuildContext context) {
    // set up the button
    Widget okButton = FlatButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );
    Widget cancelButton = FlatButton(
      child: Text("Cancel"),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      elevation: 10,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0))),
      title: Text("ORICON"),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text("Are you sure you want to logout?"),
          Padding(
            padding: const EdgeInsets.only(top: 20.0),
            child: Text(
              "1300 898 989",
              style: TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                  fontSize: 20.0),
            ),
          ),
        ],
      ),
      actions: [okButton, cancelButton],
    );

    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        visibilityTag = false;
        return AccountDetails();
      case 1:
        visibilityTag = true;
        return RequestBin();
      case 2:
        visibilityTag = true;
        return OrderBin();
      case 3:
        visibilityTag = true;
        return Report();
      case 4:
        showAlertDialog(context);
        visibilityTag = false;
        return AccountDetails();
      default:
        return new Text("Error");
    }
  }

  _onSelectItem(int index) {
    if (index == 0) {
      visibilityTag = false;
    } else {
      visibilityTag = true;
    }
//    setState(() => _selectedDrawerIndex = index);
    _selectedDrawerIndex = index; // removed setState call
    Navigator.of(context).pop(); // close the drawer
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> drawerOptions = [];
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(new ListTile(
        leading: Icon(d.icon),
        title: Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    Future<bool> customPop() {
      if (_selectedDrawerIndex == 0) {
        visibilityTag = false;
        return Future.value(true);
      } else {
        setState(() {
          visibilityTag = false;
          _selectedDrawerIndex = 0;
        });
        return Future.value(false);
      }
    }

    void navigateToHomeScreen() {
      if (_selectedDrawerIndex == 0) {
        visibilityTag = false;
      } else {
        visibilityTag = false;
        setState(() {
          _selectedDrawerIndex = 0;
        });
      }
    }

    return WillPopScope(
      onWillPop: customPop,
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            iconTheme: IconThemeData(color: Colors.black), //add this line here
            // here we display the title corresponding to the fragment
            // you can instead choose to have a static title
            title: Text(
              widget.drawerItems[_selectedDrawerIndex].title,
              style: TextStyle(color: Colors.black),
            ),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 10),
                child: Visibility(
                    visible: visibilityTag,
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: new Icon(Icons.arrow_back_ios),
                          color: Colors.grey,
                          onPressed: navigateToHomeScreen,
                        ),
                        Text(
                          "BACK",
                          style: TextStyle(color: Colors.grey),
                        )
                      ],
                    )),
              )
            ],
          ),
          drawer: Drawer(
            child: Column(
              children: <Widget>[
                UserAccountsDrawerHeader(
                    accountName: new Text("Nilesh Rathod"), accountEmail: null),
                Column(children: drawerOptions)
              ],
            ),
          ),
          body: _getDrawerItemWidget(_selectedDrawerIndex)),
    );
  }
}

但是我得到了例外

This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was: Overlay-[LabeledGlobalKey<OverlayState>#7e1a8]
  state: OverlayState#72b8b(entries: [OverlayEntry#cf40a(opaque: false; maintainState: false), OverlayEntry#e10aa(opaque: false; maintainState: true), OverlayEntry#e0ccc(opaque: false; maintainState: false), OverlayEntry#5fdab(opaque: false; maintainState: true)])
The widget which was currently being built when the offending call was made was: HomePage
  dirty
  dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#c84d4]]
  state: HomePageState#982b0
User-created ancestor of the error-causing widget was: 
  MaterialApp file:///home/ctpl119/Documents/NEW_PROJECT/oricon/oricon/lib/main.dart:11:10
When the exception was thrown, this was the stack: 
#0      Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:3687:11)
#1      Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:3702:6)
#2      State.setState (package:flutter/src/widgets/framework.dart:1161:14)
#3      OverlayState.insertAll (package:flutter/src/widgets/overlay.dart:346:5)
#4      OverlayRoute.install (package:flutter/src/widgets/routes.dart:43:24)

  

我已经检查了下面的堆栈溢出链接

• Flutter - Cannot build because the frawework is already building
• Flutter - Cannot build because the frawework is already building
• Flutter Error: "Widget cannot build because is already in the process of building"
• Assertion on Navigator.push() caused by OverlayEntry in Flutter
• Adding OverlayEntry in Flutter
• setState() or markNeedsBuild() called during build flutter

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

Answer 1

您可以在下面复制粘贴运行完整代码
您需要WidgetsBinding.instance.addPostFrameCallback

代码段

case 4:
        //showAlertDialog(context);
        WidgetsBinding.instance.addPostFrameCallback((_) {
          showAlertDialog(context);
        });
        visibilityTag = false;
        return AccountDetails();

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class DrawerItem {
  String title;
  IconData icon;

  DrawerItem(this.title, this.icon);
}

class HomePage extends StatefulWidget {
  final drawerItems = [
    DrawerItem("View Your account", Icons.account_circle),
    DrawerItem("Request", Icons.receipt),
    DrawerItem("Order", Icons.shopping_cart),
    DrawerItem("Report", Icons.report_problem),
    DrawerItem("Log out", Icons.info)
  ];

  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  int _selectedDrawerIndex = 0;
  bool visibilityTag = false;

  showAlertDialog(BuildContext context) {
    // set up the button
    Widget okButton = FlatButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );
    Widget cancelButton = FlatButton(
      child: Text("Cancel"),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      elevation: 10,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0))),
      title: Text("ORICON"),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text("Are you sure you want to logout?"),
          Padding(
            padding: const EdgeInsets.only(top: 20.0),
            child: Text(
              "1300 898 989",
              style: TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                  fontSize: 20.0),
            ),
          ),
        ],
      ),
      actions: [okButton, cancelButton],
    );

    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        visibilityTag = false;
        return AccountDetails();
      case 1:
        visibilityTag = true;
        return RequestBin();
      case 2:
        visibilityTag = true;
        return OrderBin();
      case 3:
        visibilityTag = true;
        return Report();
      case 4:
        //showAlertDialog(context);
        WidgetsBinding.instance.addPostFrameCallback((_) {
          showAlertDialog(context);
        });
        visibilityTag = false;
        return AccountDetails();
      default:
        return new Text("Error");
    }
  }

  _onSelectItem(int index) {
    if (index == 0) {
      visibilityTag = false;
    } else {
      visibilityTag = true;
    }
    setState(() => _selectedDrawerIndex = index);
    //_selectedDrawerIndex = index; // removed setState call
    Navigator.of(context).pop(); // close the drawer
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> drawerOptions = [];
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(new ListTile(
        leading: Icon(d.icon),
        title: Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    Future<bool> customPop() {
      if (_selectedDrawerIndex == 0) {
        visibilityTag = false;
        return Future.value(true);
      } else {
        setState(() {
          visibilityTag = false;
          _selectedDrawerIndex = 0;
        });
        return Future.value(false);
      }
    }

    void navigateToHomeScreen() {
      if (_selectedDrawerIndex == 0) {
        visibilityTag = false;
      } else {
        visibilityTag = false;
        setState(() {
          _selectedDrawerIndex = 0;
        });
      }
    }

    return WillPopScope(
      onWillPop: customPop,
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            iconTheme: IconThemeData(color: Colors.black), //add this line here
            // here we display the title corresponding to the fragment
            // you can instead choose to have a static title
            title: Text(
              widget.drawerItems[_selectedDrawerIndex].title,
              style: TextStyle(color: Colors.black),
            ),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 10),
                child: Visibility(
                    visible: visibilityTag,
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: new Icon(Icons.arrow_back_ios),
                          color: Colors.grey,
                          onPressed: navigateToHomeScreen,
                        ),
                        Text(
                          "BACK",
                          style: TextStyle(color: Colors.grey),
                        )
                      ],
                    )),
              )
            ],
          ),
          drawer: Drawer(
            child: Column(
              children: <Widget>[
                UserAccountsDrawerHeader(
                    accountName: new Text("Nilesh Rathod"), accountEmail: null),
                Column(children: drawerOptions)
              ],
            ),
          ),
          body: _getDrawerItemWidget(_selectedDrawerIndex)),
    );
  }
}

class AccountDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("AccountDetails");
  }
}

class RequestBin extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("RequestBin");
  }
}

class OrderBin extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("OrderBin");
  }
}

class Report extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Report");
  }
}

Answer 2

您应将_selectedDrawerIndex设置为全局变量（也可以将其置于类之上）。您无需使用setState来更改变量的值。弹出路线时，它会导致小部件重建。

_onSelectItem(int index) {
  if (index == 0) {
    visibilityTag = false;
  } else {
    visibilityTag = true;
  }
  _selectedDrawerIndex = index; // removed setState call
  Navigator.of(context).pop();
}

另外，showAlertDialog(context);之类的功能应该不在setState调用中。

因此，总而言之：

删除setState调用，这些调用会更改_selectedDrawerIndex和showAlertDialog的值。

showAlertDialog有一个生成器，因此如果要重建，则没有理由调用setState。

_getDrawerItemWidget(int pos) {
  switch (pos) {
    case 0:
      visibilityTag = false;
      return AccountDetails();
    case 1:
      visibilityTag = true;
      return RequestBin();
    case 2:
      visibilityTag = true;
      return OrderBin();
    case 3:
      visibilityTag = true;
      return Report();
    case 4:
      setState(() {
        visibilityTag = false;
      });
      showAlertDialog(context);
      return AccountDetails();
    default:
      return new Text("Error");
  }
}