如何在 Flutter 中更改 ListTile 中的前导形状？

Question

我想在 ListTile 小部件中显示一个图像，它应该看起来像这样。

这是我的代码：

                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 20.0),
                            child: Card(
                              color: Colors.white,
                              child: ListTile(
                                leading: Container(
                                  child: Image.network((orientation == Orientation.portrait
                                        ? image.portrait
                                        : image.landscape),
                                        fit: BoxFit.cover)
                                     ),
                                title: Text(terms[index].title),
                                subtitle: Text(terms[index].videoNumber.toString() + " Videos"),
                                trailing: Icon(
                                  Icons.arrow_forward_ios,
                                  color: Colors.lightBlueAccent,
                              ),
                              ),
                            ),
                          );

这导致以下输出

我该怎么做才能使图像看起来像上面一样展开。

Answer 1

您可以将 ListTile 的填充设置为 0：

                  ...
                      child: ListTile(
                        contentPadding: EdgeInsets.all(0),
                        leading: ...
                  );

但即便如此，你也可以看到领先只占据了卡片的上半部分，而不是卡片的整个高度：

                 ... 
                    Card(
                      color: Colors.blue,
                      child: ListTile(
                        contentPadding: EdgeInsets.all(0),
                        leading: ...

结果是：

您可以使用 Stack 来包含 ListTile 和前导图标，但很多东西必须硬编码。在这种情况下，我建议将 ClipRRect 与 Row 一起使用：

Padding(
                    padding: EdgeInsets.symmetric(
                        vertical: 0.0, horizontal: 20.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        height: 70,
                        color: Colors.white,
                        child: Row(
                          children: <Widget>[
                            Container(
                              color: Colors.red,
                              width: 70,
                              height: 70,
                              child: Icon(Icons.cake, color: Colors.white),
                            ),
                            SizedBox(width: 10),
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text('Test Title'),
                                  Text('Test Video',
                                      style: TextStyle(color: Colors.grey))
                                ],
                              ),
                            ),
                            Icon(Icons.arrow_forward_ios,
                                color: Colors.blue),
                          ],
                        ),
                      ),
                    ),
                  );

结果：