在什么情况下 textAlign 属性在 Flutter 中有效? [英] Under which circumstances textAlign property works in Flutter?

问题描述

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

In the code below, textAlign property doesn't work. If you remove DefaultTextStyle wrapper which is several levels above, textAlign starts to work.

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

Why and how to ensure it is always working?

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 建议的两种方法显然都在野外"不起作用.这是我嵌套在行和列中的示例.第一种方法不对齐，第二种方法使应用程序崩溃:

---

Both approaches, suggested by Remi apparently don't work "in the wild". Here is an example I nested both inside rows and columns. First approach doesn't do align and second approach makes application just crash:

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)),
                ],)),
              ],)*/]
    )));
  }
}

<小时>

我从代码中得到的是

---

What I get from code is

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

i.e. text is centered, ignoring alignment of Align element.

推荐答案

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

DefaultTextStyle is unrelated to the problem. Removing it simply uses the default style, which is far bigger than the one you used so it hides the problem.

textAlign 当Text 占用的空间大于实际内容时，在该空间中对齐文本.

textAlign aligns the text in the space occupied by Text when that occupied space is bigger than the actual content.

问题是，在 Column 中，您的 Text 占用最少的空间.然后是 Column 使用 crossAxisAlignment 对齐其子项，默认为 center.

The thing is, inside a Column, your Text takes the bare minimum space. It is then the Column that aligns its children using crossAxisAlignment which defaults to center.

捕捉这种行为的一个简单方法是像这样包装你的文本:

An easy way to catch such behavior is by wrapping your texts like this :

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

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

Which using the code you provided, render the following :

问题突然变得明显了:Text不要取整个Column的宽度.

The problem suddenly becomes obvious: Text don't take the whole Column width.

您现在有几个解决方案.

You now have a few solutions.

你可以将你的 Text 包装成一个 Align 来模仿 textAlign 行为

You can wrap your Text into an Align to mimic textAlign behavior

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

将呈现以下内容:

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

or you can force your Text to fill the Column width.

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

Either by specifying crossAxisAlignment: CrossAxisAlignment.stretch on Column, or by using SizedBox with an infinite width.

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

呈现以下内容:

在那个例子中，是 TextAlign 将文本放在左边.

In that example, it is TextAlign that placed the text to the left.

这篇关于在什么情况下 textAlign 属性在 Flutter 中有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！