Flutter - 如何将 ListTile(或行)的内容(垂直)居中?
Flutter - How to center(vertically) the contents of a ListTile (or Row)?
所以我有 ListView.builder 和一些内容。正如您在代码中看到的那样,我尝试同时使用 ListTile 和 Row,但(所有)内容不会(垂直)位于中心。图标大小的任何变化,或者 ListTile 本身都会把它弄得更乱。
child: ListView.builder(
itemExtent: size * 0.3,
itemBuilder: (context, index) => Column(
children: [
const Divider(
//height: 2,
color: color,
thickness: 1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: size * 0.2,
//padding: EdgeInsets.only(bottom: 0),
child: IconButton(
icon: const Icon(
Icons.play_circle_outlined,
size: 50,
color: Colors.black,
),
onPressed: () {},
),
),
Column(
children: [
Text(
'Recording ' '${index + 1}',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Text(
'00:20',
style: TextStyle(color: Colors.black),
),
],
),
IconButton(
icon: const Icon(
Icons.more_vert,
size: 35,
color: Colors.black,
),
onPressed: () {},
),
// ),
],
),
// Divider(
// color: color,
// thickness: 1,
// ),
// ListTile(
// dense: true,
// leading: IconButton(
// icon: const Icon(
// Icons.play_circle_outlined,
// size: 40,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// //),
// trailing: Container(
// height: double.infinity,
// child: IconButton(
// icon: const Icon(
// Icons.more_vert,
// size: 35,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// ),
// title: Text(
// 'Recording ' '${index + 1}',
// style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
// ),
// subtitle: Text(
// '00:20',
// style: TextStyle(color: Colors.black),
// ),
// ),
],
),
itemCount: 3,
),
如何让内容始终居中,以便更改 Row/ListTile 的高度或图标大小不会弄乱结构?
编辑:
这看起来居中,但我希望播放图标更大并且 ListTile 的整体高度也更大。如果我尝试增加其中任何一个,它就会把它搞砸。
您应该只删除 itemExtent 并将您的 Row 放入 Container 并将高度赋予 Container。还将标题列的 mainAxisAlignment 设置为 MainAxisAlignment.center.
ListView.builder(
// itemExtent: size * 0.3,
itemBuilder: (context, index) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Divider(
height: 1,
color: Colors.red,
thickness: 1,
),
Container(
height: size * 0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: size * 0.2,
//padding: EdgeInsets.only(bottom: 0),
child: IconButton(
icon: const Icon(
Icons.play_circle_outlined,
size: 50,
color: Colors.black,
),
onPressed: () {},
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Recording ' '${index + 1}',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Text(
'00:20',
style: TextStyle(color: Colors.black),
),
],
),
IconButton(
icon: const Icon(
Icons.more_vert,
size: 35,
color: Colors.black,
),
onPressed: () {},
),
// ),
],
),
),
// Divider(
// color: color,
// thickness: 1,
// ),
// ListTile(
// dense: true,
// leading: IconButton(
// icon: const Icon(
// Icons.play_circle_outlined,
// size: 40,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// //),
// trailing: Container(
// height: double.infinity,
// child: IconButton(
// icon: const Icon(
// Icons.more_vert,
// size: 35,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// ),
// title: Text(
// 'Recording ' '${index + 1}',
// style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
// ),
// subtitle: Text(
// '00:20',
// style: TextStyle(color: Colors.black),
// ),
// ),
],
),
itemCount: 3,
),
所以我有 ListView.builder 和一些内容。正如您在代码中看到的那样,我尝试同时使用 ListTile 和 Row,但(所有)内容不会(垂直)位于中心。图标大小的任何变化,或者 ListTile 本身都会把它弄得更乱。
child: ListView.builder(
itemExtent: size * 0.3,
itemBuilder: (context, index) => Column(
children: [
const Divider(
//height: 2,
color: color,
thickness: 1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: size * 0.2,
//padding: EdgeInsets.only(bottom: 0),
child: IconButton(
icon: const Icon(
Icons.play_circle_outlined,
size: 50,
color: Colors.black,
),
onPressed: () {},
),
),
Column(
children: [
Text(
'Recording ' '${index + 1}',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Text(
'00:20',
style: TextStyle(color: Colors.black),
),
],
),
IconButton(
icon: const Icon(
Icons.more_vert,
size: 35,
color: Colors.black,
),
onPressed: () {},
),
// ),
],
),
// Divider(
// color: color,
// thickness: 1,
// ),
// ListTile(
// dense: true,
// leading: IconButton(
// icon: const Icon(
// Icons.play_circle_outlined,
// size: 40,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// //),
// trailing: Container(
// height: double.infinity,
// child: IconButton(
// icon: const Icon(
// Icons.more_vert,
// size: 35,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// ),
// title: Text(
// 'Recording ' '${index + 1}',
// style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
// ),
// subtitle: Text(
// '00:20',
// style: TextStyle(color: Colors.black),
// ),
// ),
],
),
itemCount: 3,
),
如何让内容始终居中,以便更改 Row/ListTile 的高度或图标大小不会弄乱结构?
编辑:
这看起来居中,但我希望播放图标更大并且 ListTile 的整体高度也更大。如果我尝试增加其中任何一个,它就会把它搞砸。
您应该只删除 itemExtent 并将您的 Row 放入 Container 并将高度赋予 Container。还将标题列的 mainAxisAlignment 设置为 MainAxisAlignment.center.
ListView.builder(
// itemExtent: size * 0.3,
itemBuilder: (context, index) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Divider(
height: 1,
color: Colors.red,
thickness: 1,
),
Container(
height: size * 0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: size * 0.2,
//padding: EdgeInsets.only(bottom: 0),
child: IconButton(
icon: const Icon(
Icons.play_circle_outlined,
size: 50,
color: Colors.black,
),
onPressed: () {},
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Recording ' '${index + 1}',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Text(
'00:20',
style: TextStyle(color: Colors.black),
),
],
),
IconButton(
icon: const Icon(
Icons.more_vert,
size: 35,
color: Colors.black,
),
onPressed: () {},
),
// ),
],
),
),
// Divider(
// color: color,
// thickness: 1,
// ),
// ListTile(
// dense: true,
// leading: IconButton(
// icon: const Icon(
// Icons.play_circle_outlined,
// size: 40,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// //),
// trailing: Container(
// height: double.infinity,
// child: IconButton(
// icon: const Icon(
// Icons.more_vert,
// size: 35,
// color: Colors.black,
// ),
// onPressed: () {},
// ),
// ),
// title: Text(
// 'Recording ' '${index + 1}',
// style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
// ),
// subtitle: Text(
// '00:20',
// style: TextStyle(color: Colors.black),
// ),
// ),
],
),
itemCount: 3,
),