在哪种情况下,textAlign属性可在Flutter中工作?


81

在下面的代码中,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)),
                ],)),
              ],)*/]
    )));
  }
}

我从代码中得到的是

在此处输入图片说明

也就是说,文本居中,而忽略Align元素的对齐方式。


为什么将DefaultTextStyle用作2个文本子代的容器?
diegoveloper '18

2
我为什么不呢?
DIMS

Answers:


165

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


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

问题是,在内Column,您Text仅占用最小的空间。然后是Column,使用crossAxisAlignment默认值将其子项对齐center

捕获此类行为的一种简单方法是将文本包装成这样:

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

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

在此处输入图片说明

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


您现在有一些解决方案。

您可以将自己包装TextAlign模仿textAlign行为

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

将呈现以下内容:

在此处输入图片说明

或者,您也可以强制Text填充Column宽度。

通过指定crossAxisAlignment: CrossAxisAlignment.stretchonColumnSizedBox与infinite一起使用width

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

呈现以下内容:

在此处输入图片说明

在该示例中,就是TextAlign将文本放在左侧。


1
但是您是否不同意,您所描述的只是技巧和变通办法,这意味着库的设计不好?
DIMS

3
这绝对不是技巧/解决方法。这是官方的解决方案。Flutter使用基于约束的布局,其核心是合成。它是布局的功能编程。这是绝对真棒
雷米Rousselet

1
在第一种情况下,您两次指定了“ left”,在第二种情况下,您指定了无限宽度。尽管它们是官方的和实用的,但它们绝对是绝招。
昏暗的

1
不好意思啊,我忘了删除textAlignAlign例子。固定。颤动中的“无限宽度”只是说“我想要尽可能多的空间”。
罗米·罗素

好的,第一种方法更好,尽管在这个简单示例之外它仍然对我不起作用...
Dims

49

crossAxisAlignment: CrossAxisAlignment.start在您的栏中指定


1
难道不该?:crossAxisAlignment:CrossAxisAlignment.start
开普勒

那将不起作用,因为他只有一个文本小部件向左对齐,而一个向右对齐...
Hasen

@TSR仅在该列已经具有一个占据整个宽度的元素时才起作用(例如aRow将起作用,或Align( ... centerLeft)
TSR

14

textAlign属性仅在的内容还有更多空间可用时起作用Text。以下是两个示例,它们显示了何时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
CopsOnRoad

7

在Colum小部件中,文本对齐将自动居中,因此可 crossAxisAlignment: CrossAxisAlignment.start用于对齐开始位置。

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

3

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

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

1

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

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

过去使用对齐方式时,我遇到了文本对齐方式问题,而sizebox总是可以工作。


-1
GestureDetector(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.all(5),
            color: buttonContainerColor,
            margin: EdgeInsets.only(top: 10.0),
            width: double.infinity,
            height: bottomContainerHeight,
            alignment: Alignment.center,
            child: Text(
              "CALCULATE",
              style: TextStyle(fontSize: 25.0, color: Colors.white),
            ),
          ),
        )
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.