Flutter - 复选框动画不显示

Question

点击时该值有效改变，但动画不显示：

这是我的代码：

 var editGender = Padding(
      padding: const EdgeInsets.only(top: 12.0),
      child: Column(
        children: <Widget>[
          CheckboxListTile(
            value: _male,
            onChanged: _maleChanged,
            title: Text("Male"),
            activeColor: Theme.of(context).primaryColor,
          ),
          CheckboxListTile(
            value: _female,
            onChanged: _femaleChanged,
            title: Text("Female"),
            activeColor: Theme.of(context).primaryColor,
          )  
        ],
      ),
    );

点击编辑按钮时：

    FlatButton(
      onPressed: (){
          buildShowRoundedModalBottomSheet(context, title, editGender, option);
      },
      child: Text('Edit'),

它显示了底页：

Future buildShowRoundedModalBottomSheet(BuildContext context, String title, Widget content,[String date]) {
    return showRoundedModalBottomSheet(
        context: context,
        radius: 20.0,
        builder: (context){
          
          return Padding(
            padding: const EdgeInsets.only(top: 20.0, bottom: 20.0, left: 20.0, right: 20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  title,
                  style: TextStyle(
                    fontFamily: 'SamsungSans',
                    fontSize: 20.0,
                  ),
                ),
                content,
                ...

我将相同的上下文传递给小部件：/

Answer 1

setState 会改变值，但它不会重建你的底部工作表，因为它在 onPressed 或 FlatButton 上被调用。您当然不会再次调用 onPressed，但您也不想这样做。

正如我在 cmets 中提到的，StatefulBuilder 可以完成这项工作。

一个工作示例

import 'package:flutter/material.dart';
import 'package:rounded_modal/rounded_modal.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool value = false;

  void _incrementCounter() {
    showRoundedModalBottomSheet(
        context: context,
        builder: (context) {
          return StatefulBuilder(builder: (context, setState) {
            return Container(
              height: 200.0,
              child: Checkbox(value: value, onChanged: (val) {
                setState(() {
                  value = val;
                });
              }),
            );
          });
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 2

正如@10101010 所说，您必须使用有状态小部件。在 _femaleChanged 和 _maleChanged 中，您必须使用 setState()。示例：

void _femaleChanged(bool value) =>  setState(() => _female = value);