facebook twitter hatena line email

「Flutter/UI/横縦並び・比率」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(1つの部品と残りの部品の比率)
(縦並び)
 
(同じ利用者による、間の5版が非表示)
行39: 行39:
 
),
 
),
 
</pre>
 
</pre>
 +
 
参考:https://dev.classmethod.jp/smartphone/flutter_column_row_1/
 
参考:https://dev.classmethod.jp/smartphone/flutter_column_row_1/
 +
 +
===左詰め===
 +
child: Column(
 +
    crossAxisAlignment: CrossAxisAlignment.start,
 +
 +
===上詰め===
 +
child: Column(
 +
    mainAxisAlignment: MainAxisAlignment.start,
 +
これは違う?
  
 
==比率==
 
==比率==
行95: 行105:
  
 
==縦方向に比率表示==
 
==縦方向に比率表示==
 +
これはエラーが出るみたい・・・。
 
<pre>
 
<pre>
 
Column(
 
Column(
行112: 行123:
 
         ],
 
         ],
 
       ),
 
       ),
 +
</pre>
 +
参考:https://note.com/norisato/n/n9ae6e24b52a7
 +
 +
==左右中央==
 +
<pre>
 +
Center(
 +
        child: Column(
 +
          children: <Widget>[
 +
            Text("hogehoge"),
 +
          ],
 +
        ),
 +
</pre>
 +
==上下左右中央==
 +
<pre>
 +
Center(
 +
        child: Column(
 +
          mainAxisSize: MainAxisSize.min,
 +
          children: <Widget>[
 +
            Text("hogehoge"),
 +
          ],
 +
        ),
 +
      ),
 +
</pre>
 +
https://qiita.com/sekitaka_1214/items/03255fd9f61685503af3
 +
 +
==上下左右中央でloading==
 +
<pre>
 +
Center(
 +
          child: Column(
 +
            mainAxisSize: MainAxisSize.min,
 +
            children: <Widget>[
 +
              Container(
 +
                margin: const EdgeInsets.only(top: 8.0),
 +
                width: 32.0,
 +
                height: 32.0,
 +
                child: const CircularProgressIndicator(),
 +
              ),
 +
            ],
 +
          ),
 +
        );
 
</pre>
 
</pre>

2020年1月20日 (月) 19:16時点における最新版

横並び

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')
  ],
),

参考:https://dev.classmethod.jp/smartphone/flutter_column_row_1/

左詰め

child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,

上詰め

child: Column(
    mainAxisAlignment: MainAxisAlignment.start,

これは違う?

比率

横並びの比率を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

1つの部品と残りの部品の比率

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.blue,
        child: Text('taro'),
      ),
    ),
    Flexible(
      flex: 10,
      child: Container(
        color: Colors.green,
        child: Text('jiro'),
      ),
    ),
  ],
),

縦方向に比率表示

これはエラーが出るみたい・・・。

Column(
        children: <Widget>[
          Expanded(
            flex: 3,
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.red,
            ),
          )
        ],
      ),

参考:https://note.com/norisato/n/n9ae6e24b52a7

左右中央

Center(
        child: Column(
          children: <Widget>[
            Text("hogehoge"),
          ],
        ),

上下左右中央

Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("hogehoge"),
          ],
        ),
      ),

https://qiita.com/sekitaka_1214/items/03255fd9f61685503af3

上下左右中央でloading

Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(top: 8.0),
                width: 32.0,
                height: 32.0,
                child: const CircularProgressIndicator(),
              ),
            ],
          ),
        );