当我将主页的背景颜色设置为其他颜色时，底页无法使用“Colors.transparent”工作

Question

我尝试让底部的纸张在打开时看起来是透明的，一开始确实有效。但是当我将主页的背景颜色设置为其他颜色时，再次打开时底部工作表不再看起来透明。

这是我的实现：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(80, 75, 60, 10),
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              showCupertinoModalBottomSheet(
                barrierColor: Colors.transparent,
                expand: false,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(
                      top: Radius.circular(100.0)),
                ),
                context: context,
                builder: (BuildContext context) {
                  return CustomizedBottomSheet();
                }
              );
            },
            child: const Text(
              "open me",
            )
        ),
      ),
    );
  }
}

Answer 1

回答这个问题。

这是代码

     showModalBottomSheet(
                      backgroundColor: Colors.transparent,
                      isDismissible: false,
                      context: context,
                      builder: (context) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 16.0, vertical: 32),
                          child: Container(
                            height: MediaQuery.sizeOf(context).height * 0.5,
                            decoration: BoxDecoration(
                                color: Colors.transparent,
                                borderRadius: BorderRadius.circular(15)),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.center,
                                    children: [
                                       Text(
                                              "Some Text",
                                            ),
                                      GestureDetector(
                                          onTap: () {
                                            Navigator.pop(context);
                                          },
                                          child: Icon(
                                            Icons.cancel_rounded,
                                            color: Colors.grey,
                                          )),
                                    ],
                                  ),
                                ),
                               
                              ],
                            ),
                          ),
                        );
                      },
                    );

即使您更改脚手架的颜色，这也会起作用。根据您的要求删除或更改填充和半径。