在 Flutter 中带有图标的按钮内的居中文本

Question

我遇到了问题，我想制作一个按钮（任何一种实现此目的的按钮），该按钮的图标始终位于按钮开头的相同位置，并且按钮的文本是与其下方的文本相比始终居中，并且始终以按钮本身为中心，即使文本是动态的。这就是我想要实现的目标：

按钮文本根据下面的文本居中（保持不变）并且它以上面的按钮居中，但是如果按钮文本动态变化，那么我有这些问题：

或者像这样：

有什么解决这个问题的想法吗？

我尝试使用 Expanded 小部件并添加弹性属性但失败了。我也尝试了一些其他的东西但也失败了......这是按钮代码：

TextButton(
                              style: ButtonStyle(
                                  backgroundColor:
                                      MaterialStateProperty.all(Colors.blue)),
                              onPressed: () {},
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Expanded(
                                    flex: 1,
                                    child: Icon(
                                      Icons.keyboard_arrow_right_sharp,
                                      color: Colors.white,
                                    ),
                                  ),
                                  Expanded(
                                    flex: 4,
                                    child: Center(
                                      child: Text(
                                        "SOME TEXT",
                                        style: TextStyle(color: Colors.white),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),

在此先感谢您的帮助！

Answer 1

让我们讨论一下您的代码：使用 row 和 mainaxisalignment from start 使元素从可用区域开始。然后我建议使用 SizedBox 根据需要在元素之间设置一些间距并调整它的宽度。

TextButton(
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.blue)),
                          onPressed: () {},
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start, // here the issue
                            children: [
                              Expanded(
                                flex: 1,
                                child: Icon(
                                  Icons.keyboard_arrow_right_sharp,
                                  color: Colors.white,
                                ),
                              ),
                             SizedBox(width: MediaQuery.of(context).size.width * 0.08, // change this value as you want 0.08 or 0.1 ...etc
      ),
                              Expanded(
                                flex: 4,
                                child: Center(
                                  child: Text(
                                    "SOME TEXT",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),

阅读这篇文章documentation

Answer 2

有几个选项可以做到这一点。我假设文本的大小可能会发生变化，因此您需要一个灵活的解决方案。

第一个选项是两个选项中最明显的，但如果文本太长会中断。诀窍是在按钮的末尾添加一个空的 sizedBox，这样文本就可以在展开的小部件中居中。

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  onPressed: () {},
  child: Row(
    children: [
      Icon(
        Icons.keyboard_arrow_right_sharp,
          color: Colors.white,
          size: 24,
      ),
      Expanded(
        child: Center(
          child: Text(
            "SOME TEXT",
            style: TextStyle(
              color:Colors.white,
            ),
          ),
        ),
      ),
      SizedBox(
        width: 24, // width of the icon
      ),
    ],
  ),
);

另一个选项是使用堆栈小部件。这样，如果文本太长，它会与图标重叠，但不太可能溢出按钮。

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  onPressed: () {},
  child: Stack(
    children: [
      Positioned(
        left: 0,
        child: Icon(
          Icons.keyboard_arrow_right_sharp,
          color: Colors.white,
          size: 24,
        ),
      ),
      Center(
        child: Text(
          "SOME TEXT",
          style: TextStyle(
            color:Colors.white,
          ),
        ),
      ),
    ],
  ),
);

在 Flutter 中带有图标的按钮内的居中文本

Centered Text inside a button with an icon in Flutter

mobile

flutter

flutter-layout