Jak wyśrodkować tekst w pionie i poziomie w Flutterze?

117

Chciałbym wiedzieć, jak wyśrodkować zawartość widżetu Tekst w pionie i poziomie we Flutterze. Wiem tylko, jak wyśrodkować sam widżet za pomocą, Center(child: Text("test"))ale nie samej treści. Domyślnie jest wyrównany do lewej. W systemie Android uważam, że właściwość TextView, która to osiąga, nazywa się gravity.

Przykład tego, czego chcę:

— jeroen-meijer
źródło

265

Właściwość wyrównania tekstu do środka, ustawiając tylko wyrównanie w poziomie.

Użyłem poniższego kodu, aby ustawić tekst w pionie i na środku w poziomie.

Kod:

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

— Shelly Pritchard
źródło

1

@Shelly W niektórych przypadkach to nie zadziała, musisz dodać również heightFactor: property, np .: Center (heightFactor: 2.3, child: Text ('SELFIE', textAlign: TextAlign.center, style: TextStyle (fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold,)),),

— Sanjeev Sangral

Spojrzałem i zgodziłem się. Zmieniono to, aby było poprawną odpowiedzią, ponieważ wyśrodkowuje się w poziomie i w pionie.

— jeroen-meijer,

85

Możesz użyć TextAlignwłaściwości Textkonstruktora.

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

— Drzewo
źródło

36

Nie jestem pewien, dlaczego zostało to oznaczone jako odpowiedź, ponieważ powoduje to wyśrodkowanie tekstu tylko w poziomie, ale pytanie dotyczy poziomu i pionu.

— Herohtar

3

Tak, to powinno zostać usunięte, nie odpowiada na pytanie.

— Hasen,

51

Myślę, że bardziej elastycznym rozwiązaniem byłoby, aby owinąć Text()się Align()tak:

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

Używanie Center()wydaje się TextAligncałkowicie ignorować w widżecie Tekst. Nie wyrówna się TextAlign.leftlub TextAlign.rightjeśli spróbujesz, pozostanie na środku.

— Mikrofon
źródło

1

O wiele lepszą odpowiedzią jest ta.

— Nikola Jovic

powinna to być zaznaczona odpowiedź, ponieważ pytanie dotyczy sposobu wyśrodkowania tekstu w pionie i poziomie. Dziękuję Ci!

— Ali Gürelli

To jest odpowiedź, po prostu zastanawiam się, dlaczego mój tekst nie jest wyrównany z większym rozmiarem czcionki. Okazuje się, że środek jest dziwny z tekstem i jest punkt przerwania, który zignoruje rozmiar tekstu. Wygląda na to, że Align nie ma tego problemu ... love u <3

— ValdaXD

8

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

To dało mi najlepszy wynik.

— Paul Kitatta
źródło

3

Element tekstowy wewnątrz Center of SizedBox działa znacznie lepiej, poniżej przykładowego kodu

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
);
}

Miłego kodowania 👨‍💻

— Ramesh RC
źródło

2

Umieść tekst na środku:

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

— Minghang
źródło

2

Jeśli jesteś użytkownikiem intellij IDE, możesz użyć klawisza skrótu, Alt+Entera następnie wybrać, Wrap with Centera następnie dodaćtextAlign: TextAlign.center

— Ray Coder
źródło

0

Omówienie: użyłem widżetu Flex do wyśrodkowania tekstu na mojej stronie za pomocą pliku MainAxisAlignment.center wzdłuż osi poziomej. Używam wypełnienia kontenera, aby utworzyć margines wokół tekstu.

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

— złoty Lew
źródło

0

może chcesz zapewnić taką samą szerokość i wysokość dla 2 pojemników

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),

— Soros kłamie
źródło