什么情况下 textAlign 属性在 Flutter 中有效？

Question

在下面的代码中，textAlign 属性不起作用。如果你删除 DefaultTextStyle 上面几个级别的包装器，textAlign 开始工作。

为什么以及如何确保它始终有效？

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new DefaultTextStyle(style: new TextStyle(fontSize: 10.0), child: new Column(children: <Widget>[
        new Text("Should be left", textAlign: TextAlign.left,),
        new Text("Should be right", textAlign: TextAlign.right,)
      ],))
    );
  }
}

Remi 建议的这两种方法显然都行不通 "in the wild"。这是我在行和列中嵌套的示例。第一种方法不对齐，第二种方法使应用程序崩溃：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Directionality(textDirection: TextDirection.ltr, child: new DefaultTextStyle(
            style: new TextStyle(fontSize: 10.0, color: Colors.white),
            child: new Column(children: <Widget>[
              new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
              ],),
              /*new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left,)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
              ],)*/]
    )));
  }
}

我从代码中得到的是

即文本居中，忽略 Align 元素的对齐方式。

Answer 1

DefaultTextStyle 与问题无关。删除它只是使用默认样式，它比您使用的样式大得多，所以它隐藏了问题。

textAlign对齐space中被Text占据的文字，当space比实际内容大space时。

问题是，在 Column 中，您的 Text 取了最低限度 space。然后 Column 使用 crossAxisAlignment 对齐其子项，默认为 center.

捕获此类行为的一种简单方法是像这样包装您的文本：

Container(
   color: Colors.red,
   child: Text(...)
)

使用您提供的代码，呈现以下内容：

问题一下子变得明显了：Text不要把整个Column宽度都取下来。

您现在有一些解决方案。

您可以将 Text 包装成 Align 以模仿 textAlign 行为

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
        ),
      ),
    ),
  ],
)

这将呈现以下内容：

或者您可以强制 Text 填充 Column 宽度。

通过在 Column 上指定 crossAxisAlignment: CrossAxisAlignment.stretch，或者使用具有无限 width.

的 SizedBox

Column(
  children: <Widget>[
    SizedBox(
      width: double.infinity,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ],
),

呈现以下内容：

在该示例中，TextAlign 将文本放在左侧。

Answer 2

在您的专栏中指定 crossAxisAlignment: CrossAxisAlignment.start

Answer 3

textAlign 属性仅在 Text 的内容还剩 space 时才有效。下面是 2 个示例，显示 textAlign 何时产生影响，何时不产生影响。

无影响

例如，在这个例子中，它不会有任何影响，因为Text的内容没有额外的space。

Text(
  "Hello",
  textAlign: TextAlign.end, // no impact
),

有影响

如果您将它包装在 Container 中并提供额外的 width，这样它就有更多额外的 space。

Container(
  width: 200,
  color: Colors.orange,
  child: Text(
    "Hello",
    textAlign: TextAlign.end, // has impact
  ),
)

Answer 4

在 Column 小部件中，文本对齐会自动居中，因此请使用 crossAxisAlignment: CrossAxisAlignment.start 对齐开始。

Column( 
    crossAxisAlignment: CrossAxisAlignment.start, 
    children: <Widget>[ 
    Text(""),
    Text(""),
    ]);

Answer 5

为了获得最大的灵活性，我通常更喜欢像这样使用 SizedBox：

Row(
                                children: <Widget>[
                                  SizedBox(
                                      width: 235,
                                      child: Text('Hey, ')),
                                  SizedBox(
                                      width: 110,
                                      child: Text('how are'),
                                  SizedBox(
                                      width: 10,
                                      child: Text('you?'))
                                ],
                              )

我过去在使用对齐方式时遇到过文本对齐问题，而 sizedbox 总能解决问题。

Answer 6

在容器中设置 alignment: Alignment.centerRight：

Container(
    alignment: Alignment.centerRight,
    child:Text(
       "Hello",
    ),
)

Answer 7

您可以使用容器，它会帮助您设置对齐方式。

Widget _buildListWidget({Map reminder}) {
return Container(
  color: Colors.amber,
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.all(20),
  height: 80,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        child: Text(
          reminder['title'],
          textAlign: TextAlign.left,
          style: TextStyle(
            fontSize: 16,
            color: Colors.black,
            backgroundColor: Colors.blue,
            fontWeight: FontWeight.normal,
          ),
        ),
      ),
      Container(
        alignment: Alignment.centerRight,
        child: Text(
          reminder['Date'],
          textAlign: TextAlign.right,
          style: TextStyle(
            fontSize: 12,
            color: Colors.grey,
            backgroundColor: Colors.blue,
            fontWeight: FontWeight.normal,
          ),
        ),
      ),
    ],
  ),
);
}

Answer 8

您可以在脚手架或容器中的任何位置对齐文本，但居中除外：-

它适用于我应用程序中的任何地方：-

new Text(

                "Nextperience",

//i have setted in center.

                textAlign: TextAlign.center,

//when i want it left.

 //textAlign: TextAlign.left,

//when i want it right.

 //textAlign: TextAlign.right,

                style: TextStyle(

                    fontSize: 16,

                    color: Colors.blue[900],

                    fontWeight: FontWeight.w500),

              ),

什么情况下 textAlign 属性在 Flutter 中有效？

Under which circumstances textAlign property works in Flutter?

text-alignment

flutter

无影响

有影响

什么情况下 textAlign 属性 在 Flutter 中有效？

Under which circumstances textAlign property works in Flutter?

text-alignment

flutter

无影响

有影响

什么情况下 textAlign 属性在 Flutter 中有效？