如何制作可重复使用的模态底部 sheet

Question

通常我对每个视图使用 showModalBottomSheet 来调用上面具有相同内容的 ModalBottomSheet。我只是想让它变得简单，因为我可以调用可重用模式底部的 classsheet。

 _moreModalBottomSheet(context) {
    Size size = MediaQuery.of(context).size;
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40.0),
        ),
        context: context,
        builder: (BuildContext bc) {
          return Container(
            height: size.height * 0.5,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(40.0),
                topLeft: Radius.circular(40.0),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: ListView(
                physics: ClampingScrollPhysics(),
                children: [
                  //content of modal bottomsheet
                ],
              ),
            ),
          );
        });
  }

比如我用按钮显示模态底部sheet

ElevatedButton(onPressed: _moreModalBottomSheet(context), child: Text('show modal bottom sheet'))

我想将 _moreModalBottomSheet() 制作成 class 以便它可以重复使用。

在它是唯一一个可重复使用的布局。但是，我想要实现的是自定义 class ModalBottomSheet。所以我只能在其他 class 中调用 ModalBottomSheet ，就像 ModalBottomSheet() 而不是 return ModalBottomSheet 的 showModalBottomSheet 。这可能吗？

Answer 1

像这样打开底部sheet

InkWell(
          onTap: () {
            showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                builder: (context) {
                  return ModalBottomSheet(
                    
                      );
                });
          })

状态底部sheet

class ModalBottomSheet extends StatefulWidget {
 

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

     class _ModalBottomSheetState extends State<ModalBottomSheet>
      with SingleTickerProviderStateMixin {

      @override
    Widget build(BuildContext context) {
    double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    // TODO: implement build
    return Wrap(
      children: <Widget>[
        Container(
          margin:
              EdgeInsets.only(left: 10.0, right: 10.0, top: 15.0, bottom: 15.0),
          child: Column( 
           children: <Widget>[
            Widgets(),
            
          ]
            )
          )
        ],
      );
     }

    }

Answer 2

您只需要将其提取到一个新的 class 中，例如：

class ModalBottomSheet {
  static void _moreModalBottomSheet(context) {
    Size size = MediaQuery.of(context).size;
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40.0),
        ),
        context: context,
        builder: (BuildContext bc) {
          return Container(
            height: size.height * 0.5,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(40.0),
                topLeft: Radius.circular(40.0),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: ListView(
                physics: ClampingScrollPhysics(),
                children: [
                  //content of modal bottomsheet
                ],
              ),
            ),
          );
        });
  }
}

现在你可以像这样在任何地方调用它：

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: () =>
                ModalBottomSheet._moreModalBottomSheet(context),
            child: Text('open modal'),
          ),
        ),
      ),
    );
  }
}

如何制作可重复使用的模态底部 sheet

How to make reusable modal bottom sheet

flutter

flutter-showmodalbottomsheet