Flutter 可滑动包遮住了我的物品影子

Question

我正在尝试创建一个带有阴影的项目列表，我也使用了 flutter_slidable，现在这个 slidable 覆盖了我的项目阴影！

如您所见 第一个项目在一个可滑动的小部件内，第二个项目是一个普通项目！

操作窗格屏幕截图

这是可滑动的项目：

Slidable(
  startActionPane: ActionPane(
    extentRatio: .40,
    motion: const ScrollMotion(),
    children: <Widget>[
      InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {},
        child: Container(
          width: 70,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.background,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Theme.of(context).shadowColor,
                blurRadius: 15,
                spreadRadius: 0,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.edit,
                size: 20,
                color: Theme.of(context).colorScheme.onSurface,
              ),

              Text(
                'Delete',
                style: Theme.of(context).textTheme.subtitle1,
              ),
            ],
          ),
        ),
      ),

      const SizedBox(width: 6),

      InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {},
        child: Container(
          width: 70,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.background,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Theme.of(context).shadowColor,
                blurRadius: 15,
                spreadRadius: 0,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.delete,
                size: 20,
                color: Theme.of(context).colorScheme.onSurface,
              ),

              Text(
                'Edit',
                style: Theme.of(context).textTheme.subtitle1,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
  child: InkWell(
    borderRadius: BorderRadius.circular(20),
    onTap: () {},
    child: Container(
      padding: const EdgeInsets.all(4),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.background,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Theme.of(context).shadowColor,
            blurRadius: 15,
            spreadRadius: 0,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
              child: Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                        border: Border.all(color: Theme.of(context).colorScheme.onSurface),
                        color: Theme.of(context).colorScheme.background,
                        borderRadius: BorderRadius.circular(16)
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: Image.asset(
                        'assets/images/avatar/3.png',
                        width: 50,
                        height: 50,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          'Abc Def',
                          style: Theme.of(context).textTheme.headline6,
                        ),
                      ],
                    ),
                  ),
                ],
              )
          ),

          Row(
            children: [
              Text(
                'a',
                style: TextStyle(
                  fontFamily: 'faMed',
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),

              Icon(
                Icons.arrow_drop_down,
                color: Theme.of(context).colorScheme.secondary,
                size: 30,
              ),
            ],
          ),
        ],
      ),
    ),
  ),
),

这是一个正常的项目：

InkWell(
  borderRadius: BorderRadius.circular(20),
  onTap: () {},
  child: Container(
    padding: const EdgeInsets.all(4),
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.background,
      borderRadius: BorderRadius.circular(20),
      boxShadow: [
        BoxShadow(
          color: Theme.of(context).shadowColor,
          blurRadius: 15,
          spreadRadius: 0,
          offset: const Offset(0, 10),
        ),
      ],
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(4),
                  decoration: BoxDecoration(
                      border: Border.all(color: Theme.of(context).colorScheme.onSurface),
                      color: Theme.of(context).colorScheme.background,
                      borderRadius: BorderRadius.circular(16)
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.asset(
                      'assets/images/avatar/3.png',
                      width: 50,
                      height: 50,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),

                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        'Abc Def',
                        style: Theme.of(context).textTheme.headline6,
                      ),
                    ],
                  ),
                ),
              ],
            )
        ),

        Row(
          children: [
            Text(
              'a',
              style: TextStyle(
                fontFamily: 'faMed',
                fontSize: 12,
                fontWeight: FontWeight.w600,
                color: Theme.of(context).colorScheme.secondary,
              ),
            ),

            Icon(
              Icons.arrow_drop_down,
              color: Theme.of(context).colorScheme.secondary,
              size: 30,
            ),
          ],
        ),
      ],
    ),
  ),
),

我尝试使用dismissible 小部件而不是可滑动的小部件，但这不是我想要的！

Answer 1

一个快速的解决方案是使用ClipRRect 作为Slidable 的孩子。 ActionPane 没有为它的孩子获得足够的空间，扩展 extentRatio: 的价值。您也可以删除它，它将根据需要绘制 UI。

Slidable(
  startActionPane: ActionPane(
    extentRatio: .50,
    //...
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: InkWell(

Answer 2

这个问题在新版本中得到了解决，你可以看到这个issue。