如何在ListTileflutter中添加陰影，如“海拔”

我需要在我的專案 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,
                          ),
                        ),

uj5u.com熱心網友回復：

你可以ListTile用Material小部件包裹你的小部件并給它陰影。

例如：

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

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

試試下面的代碼希望對你有幫助。

使用卡：

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

您的結果螢屏->

參考Card

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

參考PhysicalShape

使用材料

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

請參閱

elevation: 16,
  shadowColor: Colors.black,

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