如何将文本对齐到 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 小部件的中心底部?的主要内容,如果未能解决你的问题,请参考以下文章

Flutter - 如何用动画扩展小部件?

Android垂直对齐文本和小部件

如何对齐这些小部件?

如何在 Flutter 中对齐单个小部件?

在颤动中对齐 Row 小部件的子项内的文本

Flutter - 如何在一行中显示文本和图标?