使用 flutter 将 Container 中的单个字符居中

Question

我正在尝试创建一个添加按钮，里面的图标只是一个简单的“+”字符，但出于某种原因它只是位于容器的底部而不是中心

容器中的问题文本

如果需要，这是结构，我在中心小部件中放置了我的文本小部件，并将 textAlign 设置为 TextAlign.center。

下面我提供了导致文本小部件的所有代码

Column(
children: [
  ...,
  Expanded(
    child: Row(
      children: [
        Container(
          width: 80,
          alignment: Alignment.topCenter,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                child: Container(
                  width: 60,
                  height: 60,
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.all(Radius.circular(24))
                  ),
                  child: const Center(
                    child: Text("+",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 70,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        ...,
      ],
    ),
  )
],);

请注意，这是我第一次使用 flutter。

Answer 1

所以你的字体太大，而且你的方框太小，无法显示“+”在方框的中央。

但它位于中心，如果您将此值用于第二个容器，您会看到它位于中心。

Column(
children: [
  ...,
  Expanded(
    child: Row(
      children: [
        Container(
          width: 80,
          alignment: Alignment.topCenter,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.all(Radius.circular(24))
                  ),
                  child: const Center(
                    child: Text("+",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 70,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        ...,
      ],
    ),
  )
],);

所以要做到这一点，请使用图标，您将获得更好的演示文稿，您可以在此处查看示例

Row(
        children: [
          Container(
            width: 80,
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  child: Container(
                    width: 60,
                    height: 60,
                    decoration: const BoxDecoration(
                        color: Colors.amber,
                        borderRadius: BorderRadius.all(Radius.circular(24))),
                    child: const Center(
                      child: Icon(Icons.add, size: 35,)
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),

Answer 2

更好和最佳的方法是使用 Material() 小部件并使用 SizedBox() 指定大小。稍后你可以用 Row() Column() 等包装你的小部件

SizedBox(
  height: 80,
  width: 80,
  child: Material(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(20),
    child: Center(
      child: Text(
        "+",
        style: TextStyle(
          fontSize: 50,
          color: Colors.black,
        ),
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

使用 flutter 将 Container 中的单个字符居中

Centering a single character in Container using flutter

flutter

text

flutter-layout