如何在堆栈内使文本居中答案

【问题标题】：How to make text center inside stack如何在堆栈内使文本居中
【发布时间】：2019-12-23 01:15:26
【问题描述】：

我想让我的文本在 Stack 小部件内居中。这是我迄今为止所尝试的。现在，它位于图像顶部的左侧，这不是我想要的位置。我试过使用Align 小部件和Center 小部件，但无济于事。我做错了什么？

Flexible(
  child: Padding(
    padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
    child: Stack(
      children: <Widget>[
        Wrap(
          children: <Widget>[ 
            Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
               height: 100,
            ),
          ],
        ),
        Container(
          width: MediaQuery.of(context).size.width/2,
          height: 100,
          child: Center(
            child: Wrap(
              children: <Widget>[
                Center(
                  child: Container(
                    height: 100,
                    width: MediaQuery.of(context).size.width/2,
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "BOOKS AND BOOKLETS",
                        style: TextStyle(
                          color: Colors.white, 
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),

使此文本居中的任何选项

 Expanded(child: Card(
              child: Container(
                child: Center(
                  child:  Stack(
                    children: <Widget>[
                      Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
                        height: 100,
                      ),
                      SafeArea(child: Text("asdad"))
                    ],
                  ),
                ),
              ),
            ))

如果文本大小过小（表示“abc”），则识别出问题，但如果文本大小过大（表示“abc abc abc acb acb abc”），则无法正常工作
如何解决这个问题？

【问题讨论】：

我们可以看到整个代码，也就是在灵活小部件上方吗？
另外，您可以使用EdgeInsets.all(8) 而不是单独指定所有这些。

标签： flutter flutter-layout

【解决方案1】：

你可以试试：

Container(
        width: 500,
        height: 100,
        child: Stack(
          children: <Widget>[
            Image.network(
              "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
              height: 100,
              width: 500,
            ),
            Align(
              alignment: Alignment.center,
              child: Text(
                "BOOKS AND BOOKLETS",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 11,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        ),
      )

【讨论】：

如果文本大小较小（表示“abc”），则识别出问题，但如果文本大小较大（表示“abc abc abc acb acb abc”），则无法正常工作如何解决此问题?

【解决方案2】：

已解决

 Expanded(
          child: Card(
            child: Container(

              child: Center(
                child: Stack(
                  children: <Widget>[
                    Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
                      height: 100,
                    ),
                    Positioned.fill(
                      child:Center(child:Align(
                        child:  Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
                        alignment: Alignment.center,
                      )
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),

【讨论】：

【解决方案3】：

我想通过不同的方法来处理它，如果您使用 Container 小部件并使用背景图像装饰它会怎样？然后，您可以完全避免使用Stack 小部件。

这是最少的代码：

return Padding(
  padding: const EdgeInsets.all(8),
  child: Container(
    height: 500,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage(
          "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
        ),
      ),
    ),
    child: Center(
      child: Text(
        "hi",
        style: TextStyle(color: Colors.white, fontSize: 56),
      ),
    ),
  ),
);

【讨论】：

如果文本尺寸小（表示“abc”），则识别出问题，但如果文本尺寸大（表示“abc abc abc acb acb abc”），则无法正常工作如何解决此问题?
我已经改写了我的答案@Midhilaj。

【解决方案4】：

在您的Text Widget 中使用textAlign: TextAlign.center

在Container Widget 中使用alignment: Alignment.center 也有帮助

不需要使用这么多小部件，只需将Text小部件放在Container小部件中即可并使用两个小部件的对齐属性

这应该可以解决问题。

     Container(
          width: MediaQuery.of(context).size.width/2,
          height: 100,
          alignment: Alignment.center,
             child: Text(
                     "BOOKS AND BOOKLETS",
                     textAlign: TextAlign.center
                     style: TextStyle(
                       color: Colors.white, 
                       fontSize: 18,
                       fontWeight: FontWeight.bold,
                       ),
                     ),
                   )

【讨论】：