如何在 ListTile 中添加阴影，如“海拔”答案

【问题标题】：How can i add a shadow in ListTile flutter like 'elevation'如何在 ListTile 中添加阴影，如“海拔”
【发布时间】：2021-12-30 20:42:04
【问题描述】：

我需要在我的项目 listTile 元素中添加一个阴影，但我不能用 BoxShadow 做到这一点，因为它只能在 Container 中实现

这是我的 listTile：

                        child: ListTile(

                          leading: const Icon(Icons.flight_land),
                          tileColor: Colors.black.withOpacity(0.5),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15),
                            side: BorderSide(
                              color: Colors.black,
                            ),
                          ),

                          title: Text(
                            snapshot
                                .data!.docChanges[index].doc['nameCourse'],
                            style: TextStyle(
                              fontSize: 20,
                              //COLOR DEL TEXTO TITULO
                              color: Colors.blueAccent,
                            ),
                          ),
                          contentPadding: EdgeInsets.symmetric(
                            vertical: 8,
                            horizontal: 16,
                          ),
                        ),

【问题讨论】：

标签： flutter dart shadow elevation listtile

【解决方案1】：

您可以用Material 小部件包装您的ListTile 小部件并为其添加阴影。

例如：

Material(
  elevation: 20.0,
  shadowColor: Colors.blueGrey,
...
),

【讨论】：

【解决方案2】：

          child: ListTile(
                          leading: const Icon(Icons.flight_land),
                          tileColor: Colors.black.withOpacity(0.5),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15),
                            side: BorderSide(
                              color: Colors.black,
                            ),
                          ),
                          Container(
boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ]
                          title: Text(
                            snapshot
                            .data!.docChanges[index].doc['nameCourse'],
                            style: TextStyle(
                              fontSize: 20,
                              //COLOR DEL TEXTO TITULO
                              color: Colors.blueAccent,
                            ),
                          ),
                         ),
                          contentPadding: EdgeInsets.symmetric(
                            vertical: 8,
                            horizontal: 16,
                          ),
                        ),

【讨论】：

请记住，Stack Overflow 不仅仅是为了解决眼前的问题，而是为了帮助未来的读者找到类似问题的解决方案，这需要了解底层代码。这对于我们社区的初学者和不熟悉语法的成员来说尤其重要。鉴于此，您能否edit 您的答案包括对您正在做什么的解释以及为什么您认为这是最好的方法？

【解决方案3】：

您不能向 ListTile 本身添加阴影。所以一个解决方案可以是用这样的容器包装它

Container(
  decoration: BoxDecoration(
    color: Colors.white, // Your desired background color
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(color: Colors.black.withOpacity(0.3), blurRadius: 15),
    ]
  ),
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    tileColor: Colors.black.withOpacity(0.5),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
      side: const BorderSide(
        color: Colors.black,
      ),
    ),
    title: const Text(
      'Text',
      style: TextStyle(
        fontSize: 20,
        //COLOR DEL TEXTO TITULO
        color: Colors.blueAccent,
      ),
    ),
    contentPadding:
    const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  ),
),

【讨论】：

【解决方案4】：

试试下面的代码希望对你有帮助。

使用卡片：

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15),
    side: BorderSide(
      color: Colors.black,
    ),
  ),
  elevation: 16,
  shadowColor: Colors.red,
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    title: Text(
      'Title',
      style: TextStyle(
        fontSize: 20,
        //COLOR DEL TEXTO TITULO
        color: Colors.blueAccent,
      ),
    ),
    subtitle: Text(
      'Sub Title',
    ),
    trailing: const Icon(Icons.add),
  ),
),

您的结果屏幕->

参考Cardhere

使用物理模型：

PhysicalModel(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.green,
        borderRadius: BorderRadius.circular(20),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

参考PhysicalModelhere

参考ListTilehere

您的结果屏幕->

使用 PhysicalShape

PhysicalShape(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.yellow,
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

参考PhysicalShapehere

您的结果屏幕->

使用材料

Material(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.blue,
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

参考资料here

您的结果屏幕->

【讨论】：

【解决方案5】：

你可以用卡片，把它放进卡片里

elevation: 16,
  shadowColor: Colors.black,

【讨论】：