什么情况下 textAlign 属性在 Flutter 中有效？
Posted
技术标签:
【中文标题】什么情况下 textAlign 属性在 Flutter 中有效？【英文标题】：Under which circumstances textAlign property works in Flutter? 【发布时间】：2019-01-09 07:31:45 【问题描述】：在下面的代码中，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 元素的对齐方式。
【问题讨论】：
为什么使用 DefaultTextStyle 作为 2 个子文本的容器？ 我为什么不呢？ 【参考方案1】：DefaultTextStyle 与问题无关。删除它只是使用默认样式，它比您使用的要大得多，所以它隐藏了问题。
textAlign 在Text 占用的空间大于实际内容时对齐文本。
问题是，在Column 中，您的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 宽度。
通过在Column 上指定crossAxisAlignment: CrossAxisAlignment.stretch，或使用SizedBox 和无限width。
Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
textAlign: TextAlign.left,
),
),
),
],
),
呈现以下内容：
在该示例中，TextAlign 将文本置于左侧。
【讨论】：
但是你不同意吗，你所描述的只是技巧和变通方法，意味着图书馆的糟糕设计？ 这绝对不是技巧/解决方法。这是官方的解决方案。 Flutter 使用以组合为核心的基于约束的布局。就是Layout的函数式编程。真是太棒了 在第一种情况下，您指定了两次“左”，在第二种情况下，您指定了无限宽度。这些绝对是技巧，尽管它们是官方的和实用的。 抱歉，我忘记删除Align 示例中的 textAlign。固定的。而flutter中的“无限宽度”只是说“我想要尽可能多的空间”。
好的，那么第一种方法更好，尽管在这个简单的例子之外它仍然对我不起作用......【参考方案2】：
在您的专栏中指定crossAxisAlignment: CrossAxisAlignment.start
【讨论】：
不应该这样吗？：crossAxisAlignment: CrossAxisAlignment.start 这行不通，因为他有一个文本小部件左对齐，一个右对齐... @TSR 仅当列已经有一个元素占据整个宽度时才有效（例如，Row 可以工作，或者Align( ... centerLeft)【参考方案3】：
textAlign 属性仅在为Text 的内容留出更多空间时才有效。下面是 2 个示例，显示 textAlign 何时有影响，何时没有影响。
没有影响
例如，在此示例中，它不会产生任何影响，因为Text 的内容没有额外的空间。
Text(
"Hello",
textAlign: TextAlign.end, // no impact
),
有影响
如果您将其包装在 Container 中并提供额外的 width 以使其具有更多额外空间。
Container(
width: 200,
color: Colors.orange,
child: Text(
"Hello",
textAlign: TextAlign.end, // has impact
),
)
【讨论】：
也可以使用Very \n Good Morning进行测试【参考方案4】：
在 Colum 小部件中，文本对齐会自动居中，因此请使用crossAxisAlignment: CrossAxisAlignment.start 对齐开始。
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(""),
Text(""),
]);
【讨论】：
由于解释准确，这应该是公认的答案。【参考方案5】：在容器中设置alignment: Alignment.centerRight：
Container(
alignment: Alignment.centerRight,
child:Text(
"Hello",
),
)
【讨论】：
【参考方案6】：您可以使用容器，它会帮助您设置对齐方式。
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,
),
),
),
],
),
);
【讨论】：
【参考方案7】：为了获得最大的灵活性，我通常更喜欢像这样使用 SizedBox：
Row(
children: <Widget>[
SizedBox(
width: 235,
child: Text('Hey, ')),
SizedBox(
width: 110,
child: Text('how are'),
SizedBox(
width: 10,
child: Text('you?'))
],
)
我过去在使用对齐时遇到过文本对齐问题，而 sizedbox 总是可以解决问题。
【讨论】：
【参考方案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 中有效？的主要内容，如果未能解决你的问题，请参考以下文章
错误：在包“android”中找不到属性“textAlignment”的资源标识符
如何在 Flutter 中将 AlertDialog FlatButton 居中