[英]Flutter how to change the background color of a selected tile from a ListTile
[英]Flutter - How to add two background color for same listtile
如何制作这样的列表。 尾随需要不同的背景颜色,并且必须扩展到显示的最右端。 任何人都可以帮助并显示一个与此类似的示例代码。
我现在拥有的代码
ListTile(
leading: const CircleAvatar(
backgroundImage: AssetImage("assets/images/image.jpeg"),
),
title: const Text("Annie Jospeh"),
subtitle: Row(
children: const [
Icon(
Icons.person_add,
size: 20,
color: Color.fromRGBO(8, 183, 119, 1),
),
SizedBox(
width: 5,
),
Text("10"),
SizedBox(
width: 30,
),
Text(
"\$",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(8, 183, 119, 1),
),
),
SizedBox(
width: 5,
),
Text("10"),
],
),
trailing: const SizedBox(
color: const Color.fromRGBO(234, 244, 225, 1),
child: Text("Hello"),
),
)
很简单,
Container
并为圆形边框和背景颜色提供decoration
。Row
作为子项添加到Container
并设置mainAxisSize: MainAxisSize.min
。代码:
ListTile(
contentPadding: const EdgeInsets.all(0),
leading: const CircleAvatar(
child: Icon(Icons.person),
),
title: const Text('Abdul Malik'),
subtitle: const Text('₹200'),
trailing: Container(
decoration: BoxDecoration(
color: Colors.green[100],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
width: MediaQuery.of(context).size.width * 0.4,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: const [
Icon(Icons.facebook),
Icon(Icons.facebook_rounded),
Icon(Icons.facebook_outlined),
Icon(Icons.facebook_sharp),
],
),
),
)
输出:
您可以创建自定义 listTile,而 tralling 不仅与颜色有关,还包括圆角。
Container(
height: kToolbarHeight,
color: Colors.white, //main bg color
child: Row(
children: [
Expanded(
flex: 2,
child: CircleAvatar(
backgroundColor: Colors.grey,
),
),
Expanded(
flex: 3,
child: Column(
children: [],
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
),
),
)
],
),
)
您还可以选择LayoutBuilder
而不是Expanded
用例来提供大小。
尝试添加这个
tileColor: Colors.blue,
像这样
Expanded(
child: ListTile(
tileColor: Colors.blue,
leading: FlutterLogo(),
title: Text('These ListTiles are expanded '),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.