提问人：MXC 提问时间：8/29/2020 最后编辑：Adithya ShettyMXC 更新时间：11/29/2021 访问量：15777
如何在 Flutter 中更改 ListTile 中行导的形状？
How to change shape of leading in ListTile in Flutter?
问：
我想在 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,
),
),
),
);
这会导致以下输出
我应该怎么做才能使图像看起来像上面一样展开。
答：
6赞
Bach
8/29/2020
#1
您可以将 ListTile 的填充设置为 0：
...
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: ...
);
但即便如此，你可以看到，领先者只拿了卡的上半部分，而不是整个高度：
...
Card(
color: Colors.blue,
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: ...
其结果是：
您可以使用堆栈来包含 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),
],
),
),
),
);
结果：
评论
0赞
MXC
8/29/2020
它很接近，但完全不是我想要的。drive.google.com/file/d/1veBdLzNmn4Tj52PDxU3ql5fphFi3pym7/......
0赞
Bach
8/29/2020
@AbhishekSharma 您需要将前导容器的背景颜色更改为与图标背景颜色相同的颜色。我只将前导容器颜色设置为红色，以便于视觉解释。
0赞
MXC
8/29/2020
问题是我从网络上获取图像。如何获取需要填充的图像颜色。
0赞
Bach
8/29/2020
@AbhishekSharma我通常使用这个工具： imagecolorpicker.com/en
1赞
MXC
8/29/2020
我的错，我刚刚看到后端的 json 响应中有一个 backgroundColor 属性。它成功了。再次感谢。
0赞
oussaid1
11/29/2021
#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),
],
),
),
),
);
}
评论
use a container inside of row