Flutter'da metni dikey ve yatay olarak nasıl ortalayabilirim?

113

Bir Metin widget'ının içeriğini Flutter'da dikey ve yatay olarak nasıl ortalayacağımı bilmek istiyorum. Yalnızca widget'ın kendisini kullanarak nasıl ortalanacağını biliyorum Center(child: Text("test")), içeriğin kendisini değil, varsayılan olarak sola hizalı. Android'de, bunu başaran bir TextView özelliğinin denildiğine inanıyorum gravity.

Ne istediğime dair örnek:

— jeroen-meijer
kaynak

245

Metin hizalama merkezi özelliği ayarı yalnızca yatay hizalama.

Metni dikey ve yatay olarak ortalamak için aşağıdaki kodu kullandım.

Kod:

      child: Center(
        child: Text(
          "Hello World",
          textAlign: TextAlign.center,
        ),
      ),

— Shelly Pritchard
kaynak

1

@Shelly Bazı durumlarda işe yaramazsa, heightFactor: özelliğini de eklemeniz gerekir, örneğin: Center (heightFactor: 2.3, child: Text ('SELFIE', textAlign: TextAlign.center, style: TextStyle (fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold,)),),

— Sanjeev Sangral

Bir baktım ve kabul ettim. Yatay ve dikey olarak ortalandığı için bu doğru cevap olarak değiştirildi.

— jeroen-meijer

82

Yapıcı TextAlignözelliğini kullanabilirsiniz Text.

Text("text", textAlign: TextAlign.center,)

— Ağaç
kaynak

34

Metni yalnızca yatay olarak ortaladığı için bunun neden yanıt olarak işaretlendiğinden emin değilim, ancak soru yatay ve dikey olarak soruyor .

— Herohtar

2

Evet bu kaldırılmalı, soruyu cevaplamıyor.

— Hasen

48

Ben daha esnek bir seçenek sarmak için olacağını düşünüyorum Text()ile Align()şöyle:

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

Kullanılması Center()görmezden görünüyor TextAlignMetin widget tamamen. Hizalanmayacak TextAlign.leftveya TextAlign.rightdenerseniz merkezde kalacaktır.

— Mike
kaynak

1

Bu çok daha iyi cevaptır.

— Nikola Jovic

bu işaretli cevap olmalıdır, çünkü soru, bir metnin yatay ve dikey olarak nasıl ortalanacağıyla ilgilidir. Teşekkür ederim!

— Ali Gürelli

bu cevap kesinlikle kabul edilen cevap olmalıdır

— Tom Ryan

Cevap bu çocuklar, sadece metnimin neden daha büyük bir yazı tipi boyutuyla hizalanmadığını merak ediyorum, Ortada metinle garip olduğu ve metin boyutunu yok sayacak bir kesme noktası olduğu ortaya çıktı. Hizalamada bu sorun yok gibi görünüyor ... love u <3

— ValdaXD

8

                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

Bu benim için en iyi sonucu verdi.

— Paul Kitatta
kaynak

3

Center of SizedBox içindeki metin öğesi, Örnek kodun altında çok daha iyi çalışır

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

Kodlamanın tadını çıkarın 👨‍💻

— Ramesh RC
kaynak

2

Metni Ortaya Yerleştirin:

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );

— Minghang
kaynak

2

Bir intellij IDE kullanıcı iseniz, kısayol tuşunu kullanabilirsiniz Alt+Enterve daha sonra seçim Wrap with Centerve ardından eklemektextAlign: TextAlign.center

— Ray Kodlayıcı
kaynak

0

Genel Bakış: MainAxisAlignment.center'ı kullanarak sayfamdaki metni yatay eksen boyunca ortalamak için Flex widget'ını kullandım. Metnimin etrafında bir kenar boşluğu oluşturmak için kap dolgusunu kullanıyorum.

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])

— altın Aslan
kaynak