如何在flutter中更改“showModalBottomSheet”小部件中“CheckboxListTile”小部件的值？

Question

我用 flutter 构建了一个应用程序，我想创建一个页面，允许用户更改“showModalBottomSheet”小部件中“CheckboxListTile”小部件的值。 “showModalBottomSheet”小部件应该在用户单击按钮后出现。

这是我的代码：

class showModalBottomSheetTester extends StatefulWidget {
  const showModalBottomSheetTester({super.key});

  @override
  State<showModalBottomSheetTester> createState() =>
      _showModalBottomSheetTesterState();
}

class _showModalBottomSheetTesterState
    extends State<showModalBottomSheetTester> {
  bool? _isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('showModalBottomSheetTester'),
      ),
      body: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return SizedBox(
                    height: 500,
                    child: Column(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(top: 30.0),
                          child: Text('Head'),
                        ),
                        CheckboxListTile(
                            title: const Text('data'),
                            value: _isChecked,
                            activeColor: Colors.red,
                            checkColor: Colors.blue,
                            tileColor: Colors.green,
                            subtitle: const Text('data'),
                            controlAffinity: ListTileControlAffinity.leading,
                            tristate: true,
                            onChanged: (bool? newValue) {
                              setState(() {
                                _isChecked = newValue;
                              });
                            })
                      ],
                    ),
                  );
                });
          },
          child: const Text('press')),
    );
  }
}

这段代码的用户界面很棒，但是当我单击复选框来更改值时，屏幕上没有出现任何变化。如何解决这个问题？

Answer 1

在

showModalSheet

内，如果调用

setState

，则不起作用。您需要在工作表中使用

StatefulBuilder

。

因此用

StatefulBuilder

包裹 modalSheet 的内容：

ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return StatefulBuilder(
                      builder: (BuildContext context, StateSetter setState) {
                    return SizedBox(
                      height: 500,

这是一个完整的可运行片段：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(child: showModalBottomSheetTester()),
      ),
    );
  }
}

class showModalBottomSheetTester extends StatefulWidget {
  const showModalBottomSheetTester({super.key});

  @override
  State<showModalBottomSheetTester> createState() =>
      _showModalBottomSheetTesterState();
}

class _showModalBottomSheetTesterState
    extends State<showModalBottomSheetTester> {
  bool? _isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('showModalBottomSheetTester'),
      ),
      body: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return StatefulBuilder(
                      builder: (BuildContext context, StateSetter setState) {
                    return SizedBox(
                      height: 500,
                      child: Column(
                        children: [
                          const Padding(
                            padding: EdgeInsets.only(top: 30.0),
                            child: Text('Head'),
                          ),
                          CheckboxListTile(
                              title: const Text('data'),
                              value: _isChecked,
                              activeColor: Colors.red,
                              checkColor: Colors.blue,
                              tileColor: Colors.green,
                              subtitle: const Text('data'),
                              controlAffinity: ListTileControlAffinity.leading,
                              tristate: true,
                              onChanged: (bool? newValue) {
                                setState(() {
                                  _isChecked = newValue;
                                });
                              })
                        ],
                      ),
                    );
                  });
                });
          },
          child: const Text('press')),
    );
  }
}

另请参阅

• StatefulBuilder（本周小部件）- Flutter 官方团队制作的 YouTube 视频。

• 如何在弹出警报对话框中调用 SetState - Youtube