在下面的代码中,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
与问题无关。删除它只是使用默认样式,它比您使用的要大得多,所以它隐藏了问题。
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
,或使用具有无限 width
的 SizedBox
.
Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
textAlign: TextAlign.left,
),
),
),
],
),
呈现以下内容:
在该示例中,TextAlign
将文本置于左侧。
https://stackoverflow.com/questions/51638176/