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