Flutter showModalBottomSheet 不允许透明背景容器

Question

我在这里错误地使用了某些小部件还是 showModalBottomSheet 有问题？

正如您在此处的屏幕截图中所见，我包含的测试代码在 70% 透明的容器中显示了一个按钮。这在主体中看起来是正确的。但是，当您点按“打开底部工作表”按钮以显示 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), ), ), ), ), ), ], ), ), ); } } 函数时，您会看到容器中具有 70% 透明 bg 颜色的完全相同的按钮现在是 100% 不透明。

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

我已经尝试使用 Opacity 小部件和 Stack，但 showModalBottomSheet 中似乎不允许使用透明？

try:
    1/0
except ZeroDivisionError:
    internal = Exception("Error!")
    internal.__suppress_context__ = True
    raise internal

Answer 1

你可以see here，这似乎是 Flutter 的 showModalBottomSheet() 中的一个错误。

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