Flutter 颤振showModalBottomSheet不允许透明背景容器

Flutter 颤振showModalBottomSheet不允许透明背景容器,flutter,Flutter,我是否错误地使用了一些小部件,或者这是一个问题 正如您在屏幕截图中看到的,我包含的测试代码在一个70%透明的容器中显示了一个按钮。这在主体中看起来是正确的。但是,当您点击“打开底部工作表”按钮以显示showModalBottomSheet()函数时,您将看到,在具有70%透明bg颜色的容器中,完全相同的按钮现在是100%不透明的 为什么在showModalBottomSheet小部件树中忽略容器的不透明度 我尝试过使用不透明小部件和堆栈,但showModalBottomSheet中似乎不允许透明

我是否错误地使用了一些小部件,或者这是一个问题

正如您在屏幕截图中看到的,我包含的测试代码在一个70%透明的容器中显示了一个按钮。这在主体中看起来是正确的。但是,当您点击“打开底部工作表”按钮以显示
showModalBottomSheet()
函数时,您将看到,在具有70%透明bg颜色的容器中,完全相同的按钮现在是100%不透明的

为什么在showModalBottomSheet小部件树中忽略容器的不透明度

我尝试过使用不透明小部件和堆栈,但showModalBottomSheet中似乎不允许透明

正如您所能看到的,这似乎是颤振的
showModalBottomSheet()
中的一个bug


为了克服这个问题,我在
堆栈中构建了我自己的底部工作表
,以获得底部工作表按钮所需的透明度效果。

您可以尝试给出您的
容器
(第一个,您从
showModalBottomSheet()
函数返回的容器)你希望你的
底片有什么颜色?也许我误解了你的建议。请包括一些代码。我不想给底片涂颜色。OutlinedButton所在的容器位于底部,我希望它是半透明的。
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BottomSheet(),
    );
  }
}

class BottomSheet extends StatelessWidget {
  const BottomSheet({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    void _showBottomSheet() {
      showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: MediaQuery.of(context).size.height * 0.75,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 27.0, bottom: 27.0),
                  child: Text(
                    'Select',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.blue,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 24.0, right: 24.0),
                    child: GridView.count(
                      crossAxisCount: 3,
                      mainAxisSpacing: 25.0,
                      crossAxisSpacing: 25.0,
                      padding: EdgeInsets.only(
                        bottom: 100.0,
                      ),
                      children: [
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                        Placeholder(),
                      ],
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 161.0,
                  color: Colors.white.withOpacity(0.3),
                  child: Padding(
                    padding: const EdgeInsets.only(
                      left: 24.0,
                      right: 24.0,
                    ),
                    child: Center(
                      child: OutlinedButton(
                        child: Text(
                          'Button in container with 70% transparent bg ignored',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                          ),
                          textAlign: TextAlign.center,
                        ),
                        onPressed: () {},
                        style: OutlinedButton.styleFrom(
                          backgroundColor: Colors.blue,
                          minimumSize: Size(double.infinity, 52.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(32.0),
                topRight: const Radius.circular(32.0),
              ),
            ),
          );
        },
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(32.0),
            topRight: const Radius.circular(32.0),
          ),
        ),
        barrierColor: Color.fromRGBO(0, 0, 0, 0.9),
        isScrollControlled: true,
      );
    }

    return Scaffold(
      backgroundColor: Colors.indigo,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text(
                'Open bottom sheet',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
              onPressed: _showBottomSheet,
            ),
            SizedBox(
              height: 30.0,
            ),
            Container(
              width: double.infinity,
              height: 161.0,
              color: Colors.white.withOpacity(0.3),
              child: Padding(
                padding: const EdgeInsets.only(
                  left: 24.0,
                  right: 24.0,
                ),
                child: Center(
                  child: OutlinedButton(
                    child: Text(
                      'Button in container with 70% transparent bg',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      backgroundColor: Colors.blue,
                      minimumSize: Size(double.infinity, 52.0),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}