最佳答案
使用 Align
包裹该图标并将对齐方式设置为 centerRight
,如下所示:
IntrinsicHeight(
child: Row(
children: [
Expanded(
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.info,
size: 20,
),
),
Icon(Icons.lock_clock),
Text('item 1'),
],
),
),
VerticalDivider(
color: Colors.black,
),
Expanded(
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.info,
size: 20,
),
),
Icon(Icons.lock_clock),
Text('item 1'),
],
),
),
VerticalDivider(
color: Colors.black,
),
Expanded(
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.info,
size: 20,
),
),
Icon(Icons.lock_clock),
Text('item 1'),
],
),
),
],
),
)
或者,如果您希望该图标附加到叠加层中列的右上角,您可以使用堆栈小部件包装列并在其中设置该图标,如下所示:
IntrinsicHeight(
child: Row(
children: [
Expanded(
child: Stack(
alignment: Alignment.center,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
Icon(Icons.lock_clock),
Text('item 1'),
],
),
),
Positioned(
child: Icon(
Icons.info,
size: 20,
),
top: 0,
right: 0,
)
],
),
),
VerticalDivider(
color: Colors.black,
),
Expanded(
child: Stack(
alignment: Alignment.center,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
Icon(Icons.lock_clock),
Text('item 1'),
],
),
),
Positioned(
child: Icon(
Icons.info,
size: 20,
),
top: 0,
right: 0,
)
],
),
),
VerticalDivider(
color: Colors.black,
),
Expanded(
child: Stack(
alignment: Alignment.center,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
Icon(Icons.lock_clock),
Text('item 1'),
],
),
),
Positioned(
child: Icon(
Icons.info,
size: 20,
),
top: 0,
right: 0,
)
],
),
)
],
),
)
这使图标更靠近列。
关于Flutter 将列中的一个子元素对齐到最右边,其他子元素对齐到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73619578/