今天,要实现一个底部弹出的、背景半透明的、上面两个是圆角的框,大概是这样.

1.想到了使用showBottomSheet

showBottomSheet(
                              backgroundColor: Colors.black54,
                              context: context,
                              builder: (context) {
                                return Container(
                                  height: 400,
                                  width: double.infinity,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(30),
                                          topRight: Radius.circular(30))),
                                );
                              });

• 可是实验发现,这个widget的backgroundColor属性,并不是整个弹窗的半透明背景,而是弹出的这个widget内容的背景,而且点击背景,弹窗也无法消失.

2.接着,我找到了这个showModalBottomSheet

showModalBottomSheet(
                            barrierColor: Colors.black54,
                            context: context,
                            builder: (ctx) {
                              return Container(
                                height: 400,
                                width: double.infinity,
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(30),
                                        topRight: Radius.circular(30))),
                              );
                            },
                          );

• 可是,问题又出现了,圆角怎么没有出现?(背景是全透明时,可以看到child内容的圆角)

3.几经周转,终于让我找到了答案:除了给内容设置圆角之外, showModalBottomSheet也要增加shape属性.

 showModalBottomSheet(
                            barrierColor: Colors.black54,
                            context: context,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(30),
                                    topRight: Radius.circular(30))),
                            builder: (ctx) {
                              return Container(
                                height: 400,
                                width: double.infinity,
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(30),
                                        topRight: Radius.circular(30))),
                              );
                            },
                          );