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

Question

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

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

或者像这个：

任何想法如何解决这个问题？

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

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

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

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

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,
          ),
        ),
      ),
    ],
  ),
);

Answer 2

让我们讨论一下你的代码： 从 start 开始使用带有 mainaxisalignment 的 row 使元素从可用区域开始。那么我建议使用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