使用Flutter的showModalBottomSheet接收数据并更改其值的步骤如下:
String data = '';
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Container(
// 弹出框的内容
);
},
);
},
);
TextField(
onChanged: (value) {
setState(() {
data = value;
});
},
);
完整示例代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
String data = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Modal Bottom Sheet'),
),
body: Center(
child: RaisedButton(
child: Text('Open Bottom Sheet'),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
onChanged: (value) {
setState(() {
data = value;
});
},
decoration: InputDecoration(
labelText: 'Enter data',
),
),
RaisedButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
);
},
);
},
);
},
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.check),
onPressed: () {
// 使用接收到的数据
print('Received data: $data');
},
),
);
}
}
这样,当用户在底部弹出框中输入数据时,data变量将被更新,并且可以在其他地方使用该数据。
领取专属 10元无门槛券
手把手带您无忧上云