我有一个按钮，单击时我调用以下函数，该函数在下面创建一个底页。发生的事情是它根据列表数组值构建了一个卡片列表。然后我要基于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));
}
答案 0 :(得分：3)
查看示例
String update = '更新';
///选择省市
void locationSheet() {
// showModalBottomSheet(
// context: context,
// builder: (BuildContext context) {
// return LocationPicker();
// });
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 = '更新后';
});
}
答案 1 :(得分：1)
showModalBottomSheet在使用setState时不会自行重建。如果要在构建后的bottomSheet内部更改值，则需要实现自己的bottomSheet版本（只需创建一个行为相同的有状态小部件）
答案 2 :(得分：0)
您可以简单地返回一个有状态的构建器，该构建器反过来返回您尝试调用的小部件。
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
原始答案链接 - ShahbazAli（2020 年 11 月 5 日）。