以下のコードでは、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)),
],)),
],)*/]
)));
}
}
コードから私が得るものは
Alignつまり、要素の配置を無視してテキストが中央に配置されます。
ベストアンサー1
DefaultTextStyle問題とは無関係です。これを削除すると、単にデフォルトのスタイルが使用されるだけになり、使用したスタイルよりもはるかに大きくなるため、問題が隠れてしまいます。
textAlignText占有されているスペースが実際のコンテンツよりも大きい場合に、そのスペースにテキストを配置します。
問題は、 の内部ではColumn、 がText最小限のスペースしか取らないことです。 そして、 は、のデフォルトをColumn使用してその子要素を揃えます。crossAxisAlignmentcenter
このような動作をキャッチする簡単な方法は、テキストを次のようにラップすることです。
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テキストを左側に配置します。