Flutter showModalBottomSheet 在不同的类中

Question

假设我在主屏幕（类）中有一个文本和按钮，在不同的类中有 showModalBottomSheet，当按下主屏幕按钮时，它将触发包含按钮的 showModalBottomSheet，该按钮将关闭模式底部工作表并更改（updateUI）文本在主屏幕中。

你能举例说明我如何实现这一目标吗？或者当我想更新 UI 时，showModalBottomSheet 无法在不同的类中使用？

Answer 1

你可以尝试这个代码，我希望这是一个有用的

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'),
            ),
          ],
        ),
      ),
    );
  }
}