👏
Flutter for文の中で条件分岐
初めに
正方形を3つ生成するというコードを例に、for文と条件分岐について記述します。
正方形には、0・1・2の番号を振っており、2の番号の正方形は文字色を赤にしてみます。
コード全体像
_rowChildren
という空の配列に、正方形を3回追加して行きます。
//空の配列
List<Widget> _rowChildren = [];
for(int i = 0; i < 3; i++){
_rowChildren.add(
Expanded(
child: AspectRatio(
aspectRatio: 1.0,
//条件分岐 i==2の時は ? 以下を実行 それ以外の時は : 以下を実行
child: i == 2
? Row(
children: [
Container(
child: Text(
'${i}',
style: TextStyle(fontSize: 24, color: Colors.red),
),
),
],
)
: Row(
children: [
Expanded(
child: Container(
child: Text(
'${i}',
style: TextStyle(fontSize: 24),
),
),
),
VerticalDivider(width: 0.0,color: Colors.black,),
],
),
),
),
);
}
for文
JavaScript等と全く同じ。
int i = 0
ここのint
の部分は型を指定して、変数定義をしている。
var i = 0
等でも問題ない。
for(int i = 0; i < 3; i++){
//ここに処理を記述
}
条件分岐
今回のコードの場合はchild:
以下に条件を指定しており、
?
以下に指定した条件に「当てはまる場合(trueの場合)に実行させたい処理」を記述する。
→今回の例の場合は、三個目の正方形の時だけ文字色を赤にする。
:
以下に指定した条件に「当てはまらない場合(falseの場合)に実行させたい処理」を記述する。
child: i == 2 //条件の指定
? //i == 2の時の処理を書く
: //i == 2以外の時の処理を書く
終わりに
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
Discussion