android - 更新状态 showModalBottomSheet

这与我在使用 BottomSheet 时遇到的问题相同。

您可以向下滚动并复制整个代码或阅读说明。

这里的技巧是使用全局 ScaffoldKey

首先创建脚手架键：

 final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

然后把这个钥匙给脚手架：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
       .
       .
       .

为了更好的代码可读性，我创建了一个单独的openBottomSheet函数和单独的StateFulWidget类，专门用于.bottomsheetwidgets

openBottomSheet函数如下： 注意：是bottomsheet 及其小部件的类名。BottomSheetWidget

void openBottomSheet() {
    print("Opening bottom Sheet");
    var sheetController = scaffoldKey.currentState
        .showBottomSheet((context) => BottomSheetWidget());
    
    // On Closure of bottom sheet:
    sheetController.closed.then((value) {
      print("Bottom Sheet Closed");
    });
  }

BottomSheet 类是一个StateFulWidget类，它有两个按钮和排列成一列的文本小部件。您可以参考输出图像以了解有关布局的想法。

和底片代码如下：

class BottomSheetWidget extends StatefulWidget {
  const BottomSheetWidget({
    Key key,
  }) : super(key: key);

  @override
  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.amber,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(text),
            RaisedButton(
              child: const Text('Change Text'),
              onPressed: () {
                text = ' Hey, The button pressed and changed the text';
                setState(() {});
                print(text);
              },
            ),
            ElevatedButton(
              child: const Text('Close BottomSheet'),
              onPressed: () => Navigator.pop(context),
            )
          ],
        ),
      ),
    );
  }
}

这是整个代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStateFullWidget(),
      ),
    );
  }
}

/// The text is defined here.
String text = 'hello, The Button isn\'t pressed!!!';


class MyStateFullWidget extends StatefulWidget {
  _MyStateFullWidgetState createState() => _MyStateFullWidgetState();
}

class _MyStateFullWidgetState extends State<MyStateFullWidget> {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

  //This will manage opening and closing of the bottom sheet.
  void openBottomSheet() {
    print("Opening bottom Sheet");
    var sheetController = scaffoldKey.currentState
        .showBottomSheet((context) => BottomSheetWidget());
    sheetController.closed.then((value) {
      print("Bottom Sheet Closed");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: Center(
        child: ElevatedButton(
          child: const Text('showModalBottomSheet'),
          onPressed: () {
            openBottomSheet();
          },
        ),
      ),
    );
  }
}


// All the widgets that should go into the bottom sheet should go here.
class BottomSheetWidget extends StatefulWidget {
  const BottomSheetWidget({
    Key key,
  }) : super(key: key);

  @override
  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.amber,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(text),
            RaisedButton(
              child: const Text('Change Text'),
              onPressed: () {
                text = ' Hey, The button pressed and changed the text';
                setState(() {});
                print(text);
              },
            ),
            ElevatedButton(
              child: const Text('Close BottomSheet'),
              onPressed: () => Navigator.pop(context),
            )
          ],
        ),
      ),
    );
  }
}

在按下按钮输出之前：

按下按钮输出后：

希望这可以帮助：

android - 更新状态 showModalBottomSheet

问题描述

解决方案

推荐阅读