如何根据用户在 Flutter 中的另一个屏幕上的操作来动态显示带有文本的黑色横幅？

问题描述

我的任务是让一个黑色横幅显示当用户在另一个屏幕上订购商品时从同一选项卡上的屏幕返回。如果用户通过选择另一个选项卡离开然后返回到屏幕，下面的当前代码仅适当地显示黑色横幅。我需要动态呈现的部分以“if (OrderProvider.listOrderSummary.isNotEmpty)”开头。我相信这涉及使无状态小部件有状态，但这会导致错误，表明这可能不是正确的方法。

class GridItems extends StatelessWidget {
  GridItems({@required this.infinityPageController});

  final InfinityPageController infinityPageController;

  @override
  Widget build(BuildContext context) {
    final List<Item> itemList = Provider.of<List<Item>>(context);
    if (itemList == null) {
       return Center(
       child: CupertinoActivityIndicator(
         radius: 20,),);
  }
  final List<Item> mapItemList = itemList.toList();
    return Column(
      children: <Widget>[
        TopMenuNavigation(
          infinityPageController: infinityPageController,title: 'ALL ITEMS',Divider(
          color: Colors.grey,Expanded(
          child: GridView.builder(
            gridDelegate:
               SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),itemCount: itemList.length,itemBuilder: (BuildContext contex,int index) {
              return Center(
                child: InkWell(
                  onTap: () {
                    Navigator.of(context)
                        .pushNamed('/order',arguments: mapItemList[index]);
                  },child: Container(
                    width: 310,margin: EdgeInsets.all(7),decoration: Boxdecoration(
                      color: Colors.white,border: Border.all(width: 1,color: Colors.grey),borderRadius: BorderRadius.all(
                        Radius.circular(7.0),child: Column(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.only(left: 10,top: 10),width: double.infinity,child: Text('${mapItemList[index].itemName}'),Expanded(
                          child: Image.network(
                            '${mapItemList[index].imageUrl}',],);
            },if (OrderProvider.listOrderSummary.isNotEmpty)
          GestureDetector(
            onTap: () {
              Navigator.of(context).pushNamed('/review_order');
            },child: Container(
              height: 55,color: Colors.black,child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[
                  Spacer(),Text(
                    'REVIEW ORDER (${OrderProvider.listOrderSummary.length} items)',style: TextStyle(
                        fontSize: 17,color: Colors.white,fontFamily: 'OpenSans',fontWeight: FontWeight.bold),SizedBox(width: 8),Icon(
                    Icons.navigate_next,size: 35,SizedBox(
                    width: MediaQuery.of(context).size.height * 0.065,)
        else
          SizedBox(),);
  }
}

解决方法

您必须以某种方式重建您想要返回的屏幕（或其中的一部分）。这就是状态管理解决方案应该出现的地方:)

创建 BLoC 或 ValueNotifier 并使用 StreamBuilder 或 ValueListenableBuilder 重建小部件。如果您想让它变得简单，只需在标签屏幕之间的有状态小部件内创建一个共享状态，并在出现黑色横幅时调用 setState

delegates statefulwidget statelesswidget