如何解决如何使抽屉小部件透明
我正在尝试使抽屉透明且不透明,如下代码所示:
color: Colors.black.withOpacity(0.36),
对于下面的抽屉小部件:
Drawer(
child: Container(
// color: Color(0xFF1a2f45),color: Colors.black.withOpacity(0.36),// color: Colors.transparent,child: Column(
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 24).add(safeArea),width: double.infinity,color: Colors.transparent,child: buildHeader(isCollapsed),),const SizedBox(height: 24),buildList(items: itemsFirst,isCollapsed: isCollapsed),Divider(color: Colors.white70),buildList(
indexOffset: itemsFirst.length,items: itemsSecond,isCollapsed: isCollapsed,Spacer(),buildCollapseIcon(context,isCollapsed),const SizedBox(height: 12),],
但我看到抽屉小部件中有一个默认颜色为白色,那么我该如何使其透明?
这是下面的完整代码:
class NavigationDrawerWidget extends StatelessWidget {
final padding = EdgeInsets.symmetric(horizontal: 20);
@override
Widget build(BuildContext context) {
final safeArea =
EdgeInsets.only(top: MediaQuery.of(context).viewPadding.top);
final provider = Provider.of<NavigationProvider>(context);
final isCollapsed = provider.isCollapsed;
return Container(
width: isCollapsed ? MediaQuery.of(context).size.width * 0.2 : null,child: Drawer(
child: Container(
// color: Color(0xFF1a2f45),);
}
Widget buildList({
required bool isCollapsed,required List<DrawerItem> items,int indexOffset = 0,}) =>
ListView.separated(
padding: isCollapsed ? EdgeInsets.zero : padding,shrinkWrap: true,primary: false,itemCount: items.length,separatorBuilder: (context,index) => SizedBox(height: 16),itemBuilder: (context,index) {
final item = items[index];
return buildMenuItem(
isCollapsed: isCollapsed,text: item.title,icon: item.icon,onClicked: () => selectItem(context,indexOffset + index),);
},);
void selectItem(BuildContext context,int index) {
final navigateto = (page) => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => page,));
Navigator.of(context).pop();
switch (index) {
case 0:
navigateto(GetStartedPage());
break;
case 1:
navigateto(SamplesPage());
break;
case 2:
navigateto(TestingPage());
break;
case 3:
navigateto(PerformancePage());
break;
case 4:
navigateto(DeploymentPage());
break;
case 5:
navigateto(ResourcesPage());
break;
}
}
Widget buildMenuItem({
required bool isCollapsed,required String text,required IconData icon,VoidCallback? onClicked,}) {
final color = Colors.white;
final leading = Icon(icon,color: color);
return Material(
color: Colors.transparent,child: isCollapsed
? ListTile(
title: leading,onTap: onClicked,)
: ListTile(
leading: leading,title: Text(text,style: TextStyle(color: color,fontSize: 16)),);
}
Widget buildCollapseIcon(BuildContext context,bool isCollapsed) {
final double size = 52;
final icon = isCollapsed ? Icons.arrow_forward_ios : Icons.arrow_back_ios;
final alignment = isCollapsed ? Alignment.center : Alignment.centerRight;
final margin = isCollapsed ? null : EdgeInsets.only(right: 16);
final width = isCollapsed ? double.infinity : size;
return Container(
alignment: alignment,margin: margin,child: Material(
color: Colors.transparent,child: InkWell(
child: Container(
width: width,height: size,child: Icon(icon,color: Colors.white),onTap: () {
final provider =
Provider.of<NavigationProvider>(context,listen: false);
provider.toggleIsCollapsed();
},);
}
Widget buildHeader(bool isCollapsed) => isCollapsed
? Flutterlogo(size: 48)
: Row(
children: [
const SizedBox(width: 24),Flutterlogo(size: 48),const SizedBox(width: 16),Text(
'Flutter',style: TextStyle(fontSize: 32,);
}
这是下面的结果图像:
解决方法
这是我在脚手架部分下方的 main.dart
中找到的解决方案,而不是使用以下代码:
drawer: NavigationDrawerWidget(),
通过添加主题来使用这个:
drawer: Theme(
data: Theme.of(context).copyWith(
// Set the transparency here
canvasColor: Colors
.transparent,),child: NavigationDrawerWidget(),
如下图所示:
,你试过了吗
Color = Colors.transparent 并设置高程 = 0
希望能帮到你,谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。