[解決済み] FlutterでtextAlignプロパティはどのような状況で動作しますか？

質問

以下のコードで 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 が提案した両方のアプローチは、どうやら "in the wild" では動作しないようです。以下は、行と列の内部で両方をネストした例です。最初のアプローチでは整列されず、2 番目のアプローチではアプリケーションがクラッシュします。

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 の幅を埋める。

のどちらかを指定することで crossAxisAlignment: CrossAxisAlignment.stretch で Column を使用するか、または SizedBox を使うか、あるいは無限の width .

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

とすると、次のようにレンダリングされます。

その例では TextAlign で、テキストを左に配置しています。