如何将文本对齐到 IconButton 小部件的中心底部?
Posted
技术标签:
【中文标题】如何将文本对齐到 IconButton 小部件的中心底部?【英文标题】:How to align a text to center bottom of a IconButton widget? 【发布时间】:2022-01-21 19:19:46 【问题描述】:我想将文本对齐到 IconButton 的中心底部,但它不在中心,而是在开始时。
我想要的示例:Image Here
它显示的东西:Image here
代码
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
IconButton(
onPressed: () ,
icon: Icon(
Icons.library_add_check,
size: 22,
)),
IconButton(
onPressed: () ,
icon: Icon(
Icons.message,
size: 22,
)),
IconButton(
onPressed: () ,
icon: Icon(
Icons.thumb_up,
size: 22,
)),
IconButton(
onPressed: () ,
icon: Icon(
Icons.supervisor_account,
size: 22,
)),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Align(
alignment: Alignment.center,
child: Text(
"All",
)),
],
),
],
),
我已经尝试了我所知道的一切,但仍然无法正常工作。 非常感谢您能帮我解决这个问题。
【问题讨论】:
【参考方案1】:不要为您的IconButton()
text
创建另一行,而是用Column()
包装您的IconButton()
并将Text()
添加到该Column()
。
你可以这样做。
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
Column(
children:[
IconButton(
onPressed: () ,
icon: Icon(
Icons.library_add_check,
size: 22,
)),
Text("abc"),
],
),
Column(
children:[
IconButton(
onPressed: () ,
icon: Icon(
Icons.thumb_up,
size: 22,
)),
Text("abc"),
],
),
Column(
children:[
IconButton(
onPressed: () ,
icon: Icon(
Icons.message,
size: 22,
)),
Text("abc"),
],
),
Column(
children:[
IconButton(
onPressed: () ,
icon: Icon(
Icons.supervisor_account,
size: 22,
)),
Text("ABC"),
],
),
],
),
],
);
你可以试试here
【讨论】:
哦,我明白了,非常感谢你,我想我需要在行下做一列,但我想不是。以上是关于如何将文本对齐到 IconButton 小部件的中心底部?的主要内容,如果未能解决你的问题,请参考以下文章