「Flutter/UI/横縦並び・比率」の版間の差分
提供: 初心者エンジニアの簡易メモ
細 (Admin がページ「Flutter/UI/横並び」を「Flutter/UI/横縦並び・比率」に移動しました) |
|||
| 行26: | 行26: | ||
参考：https://nzigen.com/flutter-reference/2018-04-18-row-expanded.html | 参考：https://nzigen.com/flutter-reference/2018-04-18-row-expanded.html | ||
| + | |||
| + | ==比率== | ||
| + | 横並びの比率をflexで入れる。 | ||
| + | <pre> | ||
| + | Row( | ||
| + | children: [ | ||
| + | Expanded( | ||
| + | flex: 2, | ||
| + | child: Container( | ||
| + | color: Colors.blue, | ||
| + | child: Text('taro'), | ||
| + | ), | ||
| + | ), | ||
| + | Expanded( | ||
| + | flex: 3, | ||
| + | child: Container( | ||
| + | color: Colors.green, | ||
| + | child: Text('jiro'), | ||
| + | ), | ||
| + | ), | ||
| + | Expanded( | ||
| + | flex: 1, | ||
| + | child: Container( | ||
| + | color: Colors.orange, | ||
| + | child: Text('saburo'), | ||
| + | ), | ||
| + | ), | ||
| + | ], | ||
| + | </pre> | ||
| + | https://qiita.com/kalupas226/items/5aa41ca409730606000f | ||
2019年11月20日 (水) 23:22時点における版
Row(children: <Widget>[
Expanded(child: Container(
padding: EdgeInsets.all(20.0),
child: Text("1"),
color: Colors.grey,
),),
Expanded(child: Container(
padding: EdgeInsets.all(20.0),
child: Text("2"),
color: Colors.red,
),),
Expanded(child: Container(
padding: EdgeInsets.all(20.0),
child: Text("3"),
color: Colors.green,
),),
Expanded(child: Container(
padding: EdgeInsets.all(20.0),
child: Text("4"),
color: Colors.blue,
),),
],),
上の20は高さ。
参考：https://nzigen.com/flutter-reference/2018-04-18-row-expanded.html
比率
横並びの比率をflexで入れる。
Row(
children: [
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text('taro'),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.green,
child: Text('jiro'),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.orange,
child: Text('saburo'),
),
),
],
