flutter - 如何使复选框在 modalroute 类中工作

Question

嗨，我有一个模态路线，它从下到上打开它并使屏障颜色不透明，所以我喜欢它，但问题是复选框不起作用!

class FilterSearch extends ModalRoute{

    bool chkSearchbySkill = false;

    @override
    Duration get transitionDuration => Duration(milliseconds: 700);

    @override
    bool get opaque => false;

    @override
    bool get barrierDismissible => false;

    @override
    Color get barrierColor => Colors.black.withOpacity(0.5);

    @override
    String get barrierLabel => null;

    @override
    bool get maintainState => true;

    @override
    Widget buildPage(BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,) {
        // This makes sure that text and other content follows the material style
        return Material(
            type: MaterialType.transparency,
            // make sure that the overlay content is not cut off
            child: SafeArea(
                child: _buildOverlayContent(context),
            ),
        );
    }

    Widget _buildOverlayContent(BuildContext context) {
        return Align(
            alignment: Alignment.bottomCenter,
            child: SingleChildScrollView(
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                        Container(
                          padding: EdgeInsets.only(top: 10, bottom: 50),
                            color: Colors.grey[50],
                            alignment: Alignment.bottomCenter,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                    Checkbox(
                                       value: this.chkSearchbySkill, 
                                       onChanged: (bool value){setState((){chkSearchbySkill = value;});},)
                                    ]))));}


    @override
    Widget buildTransitions(BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
        var begin = Offset(0.0, 1.0);
        var end = Offset.zero;
        var curve = Curves.ease;

        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

        return SlideTransition(
            position: animation.drive(tween),
            child: child,
        );
    }
}

如何使复选框起作用!!

另一个问题，如果我使用bottomsheet而不是模态路由，我会得到相同的结果(不透明背景)并且复选框会起作用吗？

Answer 1

我认为您的ModalRoute类没有能力通过setState方法触发小部件重建。为此，如果您想在此方法中封装复选框状态，则应该包装从 _buildOverlayContent 返回的 Align 小部件，如下所示:

Widget _buildOverlayContent(BuildContext context) {
        return StatefulBuilder(
          builder: (context, setState) {
            return Align(
              ...
            );
          }
        );
}

然后，单击后，复选框会反射(reflect)更改:

建议:将 FilterSearch 类重写为 StatefulWidget，并将其用作 showDialog 的内容，甚至用作 showModalBottomSheet 的内容强>。我的两分钱。