Question

我想使我的文本居中在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”），则无法正常工作
/>如何解决这个问题？

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

Answer 2

我想通过另一种方法来实现它，如果您使用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),
      ),
    ),
  ),
);

Answer 3

已解决

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

Answer 4

在textAlign: TextAlign.center内使用Text Widget

在您的alignment: Alignment.center中使用Container Widget可能也有帮助

无需使用太多的小部件，只需将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,
                       ),
                     ),
                   )

如何使文本在堆栈内部居中

4 个答案: