美文网首页
Flutter底部弹窗选择器BottomSheet

Flutter底部弹窗选择器BottomSheet

作者: oldSix_Zhu | 来源:发表于2023-03-28 14:03 被阅读0次
效果图

调用:

    List<CustomBottomSheetTitleModel> modelList = [
      CustomBottomSheetTitleModel('男'),
      CustomBottomSheetTitleModel('女'),
      CustomBottomSheetTitleModel('其他'),
      CustomBottomSheetTitleModel('保密'),
    ];
    CustomBottomSheet.showTitleSheet(context, modelList, (index) {
      print('----------${index}');
    });

实现:

class CustomBottomSheetTitleModel {

  final String title;

  final TextStyle? textStyle;

  final VoidCallback? onTapCallback;

  CustomBottomSheetTitleModel(this.title, {this.textStyle, this.onTapCallback});
}

/// 点击按钮回调
typedef CustomBottomSheetOnTapCallback = void Function(int index);

class CustomBottomSheet {

  /// 显示纯文字
  static Future<void> showTitleSheet(
      BuildContext context,
      List<CustomBottomSheetTitleModel> modelList,
      CustomBottomSheetOnTapCallback sheetOnTapCallback) async {
    return await showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent, //重点 去除黑色背景颜色 实现圆角
      isScrollControlled: true, // 不限制高度
      builder: (BuildContext context) {

        return GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.bottomCenter,
            height: MediaQuery.of(context).size.height,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 5,
                  width: 20,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(3)),
                  ),
                ),
                const SizedBox(height: 10),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 32),
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(32),
                      topRight: Radius.circular(32),
                    ),
                  ),
                  child: ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: modelList.length,
                    shrinkWrap: true,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          Navigator.of(context).pop();
                          sheetOnTapCallback(index);
                          if (index < modelList.length) {
                            modelList[index].onTapCallback?.call();
                          }
                        },
                        child: Container(
                          alignment: Alignment.center,
                          padding: const EdgeInsets.symmetric(vertical: 10),
                          child: Text(
                            modelList[index].title,
                            style: modelList[index].textStyle ?? const TextStyle(color: Colors.black),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

相关文章

网友评论

      本文标题:Flutter底部弹窗选择器BottomSheet

      本文链接:https://www.haomeiwen.com/subject/raatddtx.html