Question

我想在模式底部表格中单击按钮时更新文本。所有小部件（文本，按钮）都在底部表格中。我尝试了setstate，statefulbuilder，但没有用。

我尝试使用：

Answer 1

这是我在使用BottomSheet时遇到的同样的问题。

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

这里的窍门是使用全局ScaffoldKey

首先创建脚手架密钥：

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

然后将此密钥提供给脚手架：

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

为了提高代码的可读性，我创建了一个单独的openBottomSheet函数和一个单独的StateFulWidget类，专门用于bottomsheet及其widgets。

openBottomSheet函数如下： 注意：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),
            )
          ],
        ),
      ),
    );
  }
}

在按下按钮输出之前：

按下按钮输出后：

希望这会有所帮助：

更新状态showModalBottomSheet

1 个答案: