在什么情况下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或将SizedBox与无限width一起使用.

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屋！