PS：1つのことをしたいのは簡単ですが、実際に1つのことをするのは非常に困難です。
同じシリーズの記事は次のとおりです。
- Flutterシリーズのナビゲーターの使用に関する詳細な説明
- Flutterシリーズのフレックスレイアウトの詳細な説明
- Flutterシリーズでの画像読み込みの詳細な説明
- Flutterシリーズのウィジェットライフサイクル
- 混合開発Android記事のFlutterシリーズ
- Flutterシリーズのプラットフォームチャネルの使用に関する詳細な説明
Flutterは、Googleが立ち上げたクロスプラットフォームのUIフレームワークであり、AndroidとIOSで高品質のアプリケーションをすばやく構築できます。その主な特徴は、Flutterが迅速な開発機能、表現力豊かで柔軟なUI、優れたネイティブパフォーマンスを備えていることです。この記事では主に紹介します。次のように、FlutterのFlexレイアウト：
- フレックスの基本
- フレックスの一般的な設定
- 行和列
- 拡張和フレキシブル
- スペース
- 総括する
フレックスの基本
Flexレイアウト方式は、フロントエンドおよび小規模プログラムの開発で広く使用されています。以前にFlexレイアウトを学習したことがある場合は、Flutterでも同様です。FlexibleBoxの回路図は次のとおりです。
この写真の紹介については、前の記事を確認してください。
Flex Widgetは主軸の方向を設定できます。主軸の方向がわかっている場合は、行または列を直接使用できます。FlexWidgetはスクロールできません。スクロールが含まれている場合は、ListViewを使用してみてください。FlexWidgetのコンテンツが幅と高さ、黄色と黒の警告が表示されます。ストライプ、例として水平方向に表示されるエラーメッセージは次のとおりです。
I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (14749): The following assertion was thrown during layout:
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.
エラー表示は次のとおりです。
フレックスの一般的な設定
Flexの一般的なプロパティは次のとおりです。
- 方向
- mainAxisAlignment
- mainAxisSize
- crossAxisAlignment
- verticalDirection
- textBaseline
1.方向
主軸の方向を設定し、設定可能な値はAxis.horizontalとAxis.verticalであり、交差軸は主軸の方向に垂直です。
2. mainAxisAlignment：
主軸に沿った子ウィジェットの配置を設定します。デフォルトはMainAxisAlignment.startです。設定方法は次のとおりです。
- MainAxisAlignment.start：左揃え、デフォルト値。
- MainAxisAlignment.end：右揃え。
- MainAxisAlignment.center：中央揃え;
- MainAxisAlignment.spaceBetween：両端で両端揃え。
- MainAxisAlignment.spaceAround：各ウィジェットの両側の間隔は等しく、画面の端からの間隔は他のウィジェット間の間隔の半分です。
- MainAxisAlignment.spaceEvently：ウィジェットは均等に分散され、画面の端からの間隔は他のウィジェット間の間隔と等しくなります。
比較効果は次のとおりです。
3. mainAxisSize
主軸のサイズを設定します。デフォルトはMainAxisSize.maxで、設定できる値は次のとおりです。
- MainAxisSize.max：主軸のサイズは親コンテナのサイズです。
- MainAxisSize.min：主軸のサイズは、ウィジェットのサイズの合計です。
比較効果は次のとおりです。
mainAxisAlignmentをspaceBetweenに設定します。mainAxisSizeがmaxに設定されている場合、行幅全体がspaceBetweenに配置されます。mainAxisSizeがminに設定されている場合、3つのコンテナ幅の合計内でspaceBetweenに配置されます。
4. crossAxisAlignment
クロス軸に沿った子ウィジェットの配置を設定します。デフォルトはCrossAxisAlignment.centerで、設定は次のとおりです。
- CrossAxisAlignment.start：交差軸の開始位置に揃えます。
- CrossAxisAlignment.end：交差軸の終了位置に揃えます。
- CrossAxisAlignment.center：中央揃え;
- CrossAxisAlignment.stretch：クロス軸全体を塗りつぶします。
- CrossAxisAlignment.baseline：テキストの最初の行のベースラインに従って配置します。
比較効果は次のとおりです。
5.verticalDirection
子ウィジェットの配置順序を垂直方向に設定します。デフォルトはVerticalDirection.downで、設定方法は次のとおりです。
- VerticalDirection.down：上から開始し、下で終了します。
- VerticalDirection.up：開始は下部にあり、終了は上部にあります。
比較効果は次のとおりです。
交差軸設定のCrossAxisAlignment.endと、これに基づく垂直方向の変化に注意してください。
6. textBaseline
テキスト配置のベースラインタイプを設定します。設定できる値は次のとおりです。
- TextBaseline.alphabetic：文字のベースラインに合わせます。
- TextBaseline.ideographic：表意文字のベースラインに揃えます。
を使用する場合、crossAxisAlignmentがbaselineに設定されていると、textBaselineプロパティの値を設定する必要があります。使用法は次のとおりです。
// textBaseline
class FlexSamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flex Sample"),
centerTitle: true,
),
body: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16, ),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40, ),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
))
],
),
);
}
}
textBaselineプロパティを設定せず、TextBaseline.alphabeticとTextBaseline.ideographicを設定しない場合、比較効果は次のようになります。
両者は対応するベースラインの意味が異なりますが、テストでは違いは見られませんでした。後期の観察に引き続き注意を払い、知っている友人がコメントして指摘することができます。
行和列
行と列はどちらもフレックスを継承し、行の主軸の方向は水平方向であり、列の主軸の方向は垂直方向です。つまり、主軸の方向はフレックスに基づいて設定されます。次のとおりです。
// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,
主軸の方向を決定する場合は、行または列を直接使用でき、使用法はFlexと同じです。
拡張和フレキシブル
FlexibleのfixプロパティはデフォルトでFlexFit.looseになりますが、ExpandedはFlexibleを継承し、そのfixプロパティはFlexFit.tightとして指定されます。fixプロパティが使用されないため、2つは異なります。FlexibleのfitプロパティがFlexFit.tightに設定されている場合、次にFlexible and Expandedと同等に、設定できるフィット属性は次のとおりです。
- タイト：使用可能なスペースを強制的に埋めます。
- 緩い：ウィジェット自体のサイズである、使用可能なスペースを強制的に埋めることはありません。
比較効果は次のとおりです。
Expandedを使用すると、Row、Column、およびFlexのコンポーネントを主軸に沿って使用可能なスペースで埋めることができます。複数のウィジェットでExpandedコンポーネントを使用する場合は、Expanded flexプロパティを使用して、主軸スペースを比例配分できます。flexプロパティは次のように、AndroidLinearLayoutプロパティの重み：
// Expanded
class ExpandedSamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: 50,
height: 50,
color: Colors.red,
child: Center(
child: Text(
"A",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Expanded(
flex: 2,
child: Container(
width: 50, // Row Expanded下width无效
height: 50, // Column Expanded下height无效
color: Colors.green,
child: Center(
child: Text(
"B",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
child: Center(
child: Text(
"C",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
],
));
}
}
表示効果は次のとおりです。
スペーサー
スペーサーはウィジェット間の間隔を調整するために使用され、残りのすべてのスペースを占有します。したがって、MainAxisAlignmentの設定は無効になります。スペーサーのプロパティflexは、残りのスペースの分散ウェイトを設定するために使用されます。デフォルト値は1です。これは、残りのすべてのスペースが占有されていることを意味します。複数のスペーサーがflexに従って残りのスペースを割り当てます。コード参照は、次のとおりです。
class RowSamplePage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150),
child: Row(
children: <Widget>[
Container(
width: 80,
height: 80,
color: Colors.red,
),
Spacer(flex: 1,),
Container(
width: 80,
height: 80,
color: Colors.green,
),
Spacer(flex: 2,),
Container(
width: 80,
height: 80,
color: Colors.yellow,
),
],
),
));
}
}
表示効果は次のとおりです。
上記は主にFlutterのFlexレイアウト関連コンテンツを学習し、Flexの基本概念を理解することに重点を置いています。これに基づいて、Flexレイアウトを調査および検証しました。その他のコンテンツについては、WeChatパブリックアカウントを参照してください。
