我如何在 ListTile 中添加阴影，如 'elevation'

Question

我需要在 flutter 中的项目 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,
                          ),
                        ),

Answer 1

您不能向 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),
  ),
),

Answer 2

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

例如：

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

Answer 3

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

使用卡：

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

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),
        ),
      ),

参考Materialhere

您的结果屏幕->

Answer 4

可以用卡，把这个放在卡里

elevation: 16,
  shadowColor: Colors.black,

Answer 5

          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,
                          ),
                        ),

我如何在 ListTile 中添加阴影，如 'elevation'

How can i add a shadow in ListTile flutter like 'elevation'

elevation

shadow

dart

flutter

listtile