如何使抽屉小部件透明

问题描述

我正在尝试使抽屉透明且不透明，如下代码所示：

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

希望能帮到你，谢谢