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

问题描述

在下面的代码中，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 建议的两种方法显然都不能“在野外”工作。这是我嵌套在行和列中的示例。第一种方法不对齐，第二种方法使应用程序崩溃：

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元素的对齐方式。

标签： fluttertext-alignment

解决方案

DefaultTextStyle与问题无关。删除它只是使用默认样式，它远大于您使用的样式，因此它隐藏了问题。

textAlignText当占用空间大于实际内容时，对齐占用空间中的文本。

问题是，在 aColumn中，您Text占用了最小的空间。然后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宽度。

通过指定crossAxisAlignment: CrossAxisAlignment.stretchonColumn或使用SizedBox无限width。

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

呈现以下内容：

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

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

问题描述

解决方案

推荐阅读