web-dev-qa-db-ja.com

どのような状況で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,)
      ],))
    );
  }
}

Remiによって提案された両方のアプローチは、明らかに「インザワイルド」では機能しません。行と列の両方にネストした例を次に示します。最初のアプローチでは調整が行われず、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)),
                ],)),
              ],)*/]
    )));
  }
}

コードから得られるのは

enter image description here

つまり、テキストは中央に配置され、Align要素の配置は無視されます。

fluttertext-alignment
26
Dims

DefaultTextStyleは問題とは無関係です。これを削除するには、デフォルトのスタイルを使用します。これは、使用したスタイルよりもはるかに大きいため、問題が隠されます。

textAlignは、その占有スペースが実際のコンテンツよりも大きい場合に、Textが占有するスペースでテキストを位置合わせします。

事は、Columnの中では、あなたのTextは最小限のスペースを取ります。 ColumnがデフォルトでcrossAxisAlignmentに設定されているcenterを使用して、その子を整列します。

このような動作をキャッチする簡単な方法は、次のようにテキストをラップすることです。

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を指定するか、SizedBoxを無限に使用してwidthを使用します。

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です。

56
Rémi Rousselet

列にcrossAxisAlignment: CrossAxisAlignment.startを指定します

19
The real me

textAlignプロパティは、Textのコンテンツ用にさらにスペースが残っている場合にのみ機能します。以下に、textAlignに影響がある場合とない場合を示す2つの例を示します。

影響なし

たとえば、この例では、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

3
CopsOnRoad