[英]CircleAvatar as leading in ListTile
In my ListTile, I want a CircleAvatar with a border, that's why I have a CircleAvatar inside an other.在我的 ListTile 中,我想要一个带边框的 CircleAvatar,这就是为什么我在另一个里面有一个 CircleAvatar。 The problem is the border doesn't appear.
问题是边框没有出现。 And when I try my code outside a ListTile, it works...
当我在 ListTile 之外尝试我的代码时,它有效......
Code:代码:
class TestTile extends StatelessWidget {
const TestTile({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: const [
/***** DOES NOT WORK *****/
Card(
child: SizedBox(
width: 200,
height: 100,
child: ListTile(
leading: CircleAvatar(
radius: 32,
backgroundColor: Colors.blue,
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.red,
)),
title: Text("test"),
))),
/***** WORKS *****/
CircleAvatar(
radius: 32,
backgroundColor: Colors.blue,
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.red,
))
]));
}
}
Instead of putting two CircleAvatar
inside each other to get border, use Container
with decoration
property, like this:不要将两个
CircleAvatar
放在彼此内部以获得边框,而是使用具有decoration
属性的Container
,如下所示:
Card(
child: SizedBox(
width: 200,
height: 100,
child: ListTile(
leading: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.blue, width: 2)),
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.red,
),
),
title: Text("test"),
))),
It's because a ListTile
has a fixed height.这是因为
ListTile
具有固定高度。 The CircleAvatar
s simply don't fit in them with your wanted radiuses so they both get shrunk down to largest size that does fit. CircleAvatar
s 根本不适合您想要的半径,因此它们都缩小到适合的最大尺寸。 If you try with smaller radiuses, like 20 and 18 for example you will see that it does work.如果您尝试使用更小的半径,例如 20 和 18,您会发现它确实有效。
To increase the height of the ListTile
you can also try to set the visualDensity
for example like this, then it might fit要增加
ListTile
的高度,您还可以尝试像这样设置visualDensity
,那么它可能适合
child: ListTile(
visualDensity: VisualDensity(vertical: 2),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.