「Flutter/UI/横縦並び・比率」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→比率) |
|||
| 行30: | 行30: | ||
横並びの比率をflexで入れる。 | 横並びの比率をflexで入れる。 | ||
<pre> | <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> | </pre> | ||
https://qiita.com/kalupas226/items/5aa41ca409730606000f | https://qiita.com/kalupas226/items/5aa41ca409730606000f | ||
2019年11月20日 (水) 23:23時点における版
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'),
),
),
],
