Flutter 设置状态不更新 bottomsheet 函数中的变量值

Question

我有一个按钮，点击它我会调用以下创建底页的函数 below.What 发生的是它基于列表数组值构建卡片列表。然后我想根据 onTap 手势更新其中一张卡片的值。我注意到它检测到手势但没有更新它的值。最重要的是，我有一个定义为

的全局变量

String _localPNumberSelected="";

在 onTap 中我调用了 setState

setState(() {                                                   
 _localPNumberSelected=vList[index]["pNumber"].toString();
});

但这不会更新

children: [
  new Text('$_localPNumberSelected'),                                                
],

这是完整的代码。

void _callQuickListModalBottomSheet(context){
    Future<void> future = showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext bc){
          return Container(
            height: 280,
            margin: new EdgeInsets.fromLTRB(200, 0, 10, 0),
            child : new Container(
              decoration: new BoxDecoration(
                 color: Color.fromRGBO(36, 46, 66, 1),
                 borderRadius: new BorderRadius.only(
                   topLeft: const Radius.circular(20),
                   topRight: const Radius.circular(20)
                 ),                 
              ),
              child: new Column(                    
                      children: <Widget>[
                        new Container(
                        margin: new EdgeInsets.fromLTRB(10, 10, 10, 0),
                        height:45,
                        child: new Column(
                        children: <Widget>[
                          new Card(
                                    color: Colors.white,
                                    child: Row (
                                    children: <Widget>[
                                              new Column(
                                                 mainAxisAlignment: MainAxisAlignment.center,
                                                 crossAxisAlignment: CrossAxisAlignment.center,
                                                 children: <Widget>[
                                                   Container(
                                                      decoration: new BoxDecoration(
                                                      color: Colors.green,
                                                      borderRadius: new BorderRadius.only(
                                                        topLeft: const Radius.circular(5),
                                                        bottomLeft: const Radius.circular(5)
                                                      ),
                                                      ),
                                                  child: Icon(Icons.check, size: 20.0),
                                                  height: 27,
                                                  width: 30,
                                                ),
                                              ],
                                              ),
                                              new Column(
                                                mainAxisAlignment: MainAxisAlignment.center,
                                                crossAxisAlignment: CrossAxisAlignment.center,
                                                mainAxisSize: MainAxisSize.max,
                                                children: [
                                                        new Text('$_localPNumberSelected'),

                                               ],
                                             ), 
                                      ],
                                    )
                          )
                        ]
                        )
                        ),
                        new Container(
                        height:190,                        
                        child:
                        new ListView.builder(
                          shrinkWrap: true,
                          itemCount: vehicleListdata.length,                          
                          itemBuilder: (BuildContext ctxt, int index) {
                            return Container(
                              margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
                              width: 30.0,
                              height: 35.0,                         
                                  child: Card(
                                    color: Colors.white,
                                    child: Row (
                                    children: <Widget>[
                                              new Column(
                                                 mainAxisAlignment: MainAxisAlignment.center,
                                                 crossAxisAlignment: CrossAxisAlignment.center,
                                                 children: <Widget>[
                                                 Container(
                                                      decoration: new BoxDecoration(
                                                      color: Colors.amber,
                                                      borderRadius: new BorderRadius.only(
                                                        topLeft: const Radius.circular(5),
                                                        bottomLeft: const Radius.circular(5)
                                                      ),

                                                    ),
                                                  height: 27,
                                                  width: 10,

                                                  ),
                                              ],
                                              ),
                                              new Column(
                                                mainAxisAlignment: MainAxisAlignment.center,
                                                crossAxisAlignment: CrossAxisAlignment.center,
                                                mainAxisSize: MainAxisSize.max,
                                                children: [
                                                     new GestureDetector(
                                                          onTap: () {
                                                            setState(() {
                                                              _localPNumberSelected=vList[index]["pNumber"].toString();
                                                            });
                                                          doSomething(vList[index]["pNumber"].toString());
                                                        }, 
                                                        child:new Text(vList[index]["pNumber"].toString()),    
                                                       ),

                                            ],
                                          ), 
                                      ],
                                    ),


                                  )
                            );

                          }
                        )
                        )
                      ],
                    ),
            )
          );
      }
    );
    future.then((void value) => _closeModal(value));
}

Answer 1

当您使用 setState 时，

showModalBottomSheet 不会自行重建。如果您想在构建 bottomSheet 后更改其内部值，则需要实现您自己的 bottomSheet 版本（只需创建一个行为相同的有状态小部件）

Answer 2

参见示例

 String update = 'Oya Update Jhoor';

  void locationSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context,state){
            return Center(
              child: FlatButton(
                  onPressed: () {
                    updated(state);
                  },
                  child: new Text('$update')),
            );
          });
        });
  }

  Future<Null> updated(StateSetter updateState) async {
    updateState(() {
      update = 'Update Leekan si';
    });
  }

Answer 3

您可以简单地 return 一个有状态的构建器，它反过来 return 是您尝试调用的小部件。

showModalBottomSheet(
context: context,
builder: (context) {
  return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {
    return Container(
      height: heightOfModalBottomSheet,
      child: RaisedButton(onPressed: () {
        setState(() {
          heightOfModalBottomSheet += 10;
        });
      }),
    );
  });

});

https://www.codegrepper.com/code-examples/whatever/how+to+change+state+of+Bottomsheet+in+flutter

Link 到原始答案 - ShahbazAli（2020 年 11 月 5 日）。

Flutter 设置状态不更新 bottomsheet 函数中的变量值

Flutter set state not updating variable value in bottomsheet function

setstate

flutter

bottom-sheet