在什么情况下 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,)
],))
);
}
}

雷米建议的这两种方法显然在“野外”都行不通。下面是我在行和列中嵌套的一个示例。第一种方法无法对齐，而第二种方法只会让应用程序崩溃:

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

我从代码中得到的是

enter image description here

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

285304 次浏览
小开
最佳答案

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

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

问题是，在 Column里面，你的 Text只占用了最小的空间。然后是 Column，使用默认为 center的 crossAxisAlignment对齐它的子元素。

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

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

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

enter image description here

问题突然变得明显: Text不采用整个 Column宽度。

现在您有了一些解决方案。

您可以将 Text包装成 Align来模拟 textAlign的行为

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

这将导致以下结果:

enter image description here

或者你可以强制你的 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,
),
),
),
],
),

其结果如下:

enter image description here

在这个例子中，是 TextAlign将文本放在了左边。

小开

在列中指定 crossAxisAlignment: CrossAxisAlignment.start

小开

textAlign属性只有在为 Text的内容留出更多空间时才有效。下面的两个例子说明了 textAlign 什么时候有影响，什么时候没有。

没有影响

例如，在本例中，它不会产生任何影响，因为 Text的内容没有额外的空间。

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

enter image description here

有影响力

如果你把它包在一个 Container和提供额外的 width使它有更多的额外空间。

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

enter image description here

小开

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

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

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

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

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

小开

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

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

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

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,
),
),
),
],
),
);
}
小开

您可以在脚手架或容器中的任何位置对齐文本，除了中心:-

它在我的应用程序中的任何地方都适用:-

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),


),
小开 
Text(' Use textAlign: TextAlign.center',
style: TextStyle(fontWeight: FontWeight.w900,fontSize: 20,),


textAlign: TextAlign.center,)

尝试直接输入文本时，请始终使用 textAlign


提交答案