facebook twitter hatena line email

「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
 +
 +
==縦並び==
 +
<pre>
 +
Column(
 +
  crossAxisAlignment: CrossAxisAlignment.center,
 +
  children: <Widget>[
 +
    Text('taro'),
 +
    Text('jiro'),
 +
    Text('saburo')
 +
  ],
 +
),
 +
</pre>
 +
参照:
  
 
==比率==
 
==比率==
行56: 行69:
 
),
 
),
 
</pre>
 
</pre>
https://qiita.com/kalupas226/items/5aa41ca409730606000f
+
参照:https://qiita.com/kalupas226/items/5aa41ca409730606000f

2019年11月20日 (水) 23:29時点における版

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

縦並び

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('taro'),
    Text('jiro'),
    Text('saburo')
  ],
),

参照:

比率

横並びの比率を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'),
      ),
    ),
  ],
),

参照:https://qiita.com/kalupas226/items/5aa41ca409730606000f