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

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ę:

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

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

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

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.

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

To dało mi najlepszy wynik.

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 👨‍💻

Umieść tekst na środku:

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

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

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

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