假设我在主屏幕(类)中有一个文本和按钮,在不同的类中有 showModalBottomSheet,当按下主屏幕按钮时,它将触发包含按钮的 showModalBottomSheet,该按钮将关闭模式底部工作表并更改(updateUI)文本在主屏幕中。
你能举例说明我如何实现这一目标吗?或者当我想更新 UI 时,showModalBottomSheet 无法在不同的类中使用?
你可以尝试这个代码,我希望这是一个有用的
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainScreen(),
);
}
}
class MainScreen extends StatefulWidget {
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
String _displayText = 'Initial Text';
void _updateText(String newText) {
setState(() {
_displayText = newText;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_displayText),
MaterialButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return BottomSheetWidget(updateText: _updateText);
},
);
},
child: Text('Show Modal Bottom Sheet'),
),
],
),
),
);
}
}
class BottomSheetWidget extends StatelessWidget {
final Function(String) updateText;
BottomSheetWidget({required this.updateText});
@override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
MaterialButton(
onPressed: () {
updateText('Updated Text');
Navigator.pop(context);
},
child: Text('Update Text and Close'),
),
],
),
),
);
}
}