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

【问题标题】：How to change shape of leading in ListTile in Flutter?如何在 Flutter 中更改 ListTile 中的前导形状？
【发布时间】：2021-11-29 08:47:08
【问题描述】：

我想在 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,
                              ),
                              ),
                            ),
                          );

这导致以下输出

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

【问题讨论】：

向容器添加圆角或在行内使用容器而不是前导
当你说use a container inside of row时，你的意思是根本不使用ListTile吗？
列表图块内不使用行，然后在行内添加容器

标签： flutter flutter-layout

【解决方案1】：

可以将 ListTile 的 padding 设置为 0：

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

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

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

结果：

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

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

结果：

【讨论】：

它很接近，但它完全不是我想要的。 drive.google.com/file/d/1veBdLzNmn4Tj52PDxU3ql5fphFi3pym7/…
@AbhishekSharma 您需要将前导 Container 的背景颜色更改为与您的图标背景颜色相同。为了便于视觉解释，我只将前导 Container 颜色设置为红色。
问题是我从网络获取图像。如何得到需要填充的图像颜色。
@AbhishekSharma 我通常使用这个工具：imagecolorpicker.com/en
我的错，我刚刚看到来自后端的 json 响应中有一个 backgroundColor 属性。它成功了。再次感谢。

【解决方案2】：

Widget buildCard(_user) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
      
        child: Card(
          color: Colors.blue.shade100,
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.all(0),
                decoration:  BoxDecoration(
                  color: Colors.blue.shade200,
                  shape: BoxShape.rectangle,
                  borderRadius:const BorderRadius.only(
                    topLeft: Radius.circular(4.0),
                    bottomLeft: Radius.circular(4.0),
                  ),
                ),
                width: 20,
                height: 73,
              ),
              const SizedBox(width: 10),
              Expanded(
                child: ListTile(
                  title: Text('${_user.state?.email!.substring(0, 6)}'),
                  subtitle: Text('${_user.state?.createdAt}'),
                ),
              ),
              //const Icon(Icons.arrow_forward_ios, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }

【讨论】：

欢迎来到 Stack Overflow。当代码附有解释时，它会更有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请edit您的问题并解释它如何回答所提出的具体问题。见How to Answer。