facebook twitter hatena line email

「Flutter/UI/ListTile」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(小技)
(上下にボーダーのあるListTail)
 
(同じ利用者による、間の2版が非表示)
行10: 行10:
 
     )
 
     )
 
   ),
 
   ),
   trailing: Icon(Icons.more_vert),
+
   trailing: Icon(Icons.keyboard_arrow_right),
 
   onTap: () {
 
   onTap: () {
 
     // tap時の挙動
 
     // tap時の挙動
行16: 行16:
 
);
 
);
 
</pre>
 
</pre>
 +
 +
==上下にボーダーのあるListTail==
 +
<pre>
 +
Container(
 +
  padding: const EdgeInsets.all(0.0),
 +
  decoration: BoxDecoration(
 +
    border: Border(
 +
      top: BorderSide(
 +
        color: Colors.black45,
 +
        width: 1.0,
 +
      ),
 +
      bottom: BorderSide(
 +
        color: Colors.black45,
 +
        width: 1.0,
 +
      ),
 +
    ),
 +
  ),
 +
  child: ListTile(
 +
    title: Text("リスト1",
 +
        style: TextStyle(
 +
          locale: Locale("ja", "JP"),
 +
        )
 +
    ),
 +
    trailing: Icon(Icons.keyboard_arrow_right),
 +
    onTap: () {
 +
      _navigatorResetPage();
 +
    }, //
 +
  ),
 +
),
 +
</pre>
 +
 +
==左右にアイコン2行テキスト==
 +
ListTile(
 +
        leading: FlutterLogo(size: 56.0),
 +
        title: Text('Two-line ListTile'),
 +
        subtitle: Text('Here is a second line'),
 +
        trailing: Icon(Icons.more_vert),
 +
      ),
 +
 
==小技==
 
==小技==
 
heightで高さ幅を小さくできる。
 
heightで高さ幅を小さくできる。

2019年11月29日 (金) 00:31時点における最新版

ListTileとは

ListViewの1行を表す。

サンプル

ListTile(
  title: Text("リスト1",
    style: TextStyle(
      locale: Locale("ja", "JP"),
    )
  ),
  trailing: Icon(Icons.keyboard_arrow_right),
  onTap: () {
     // tap時の挙動
  },
);

上下にボーダーのあるListTail

Container(
  padding: const EdgeInsets.all(0.0),
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.black45,
        width: 1.0,
      ),
      bottom: BorderSide(
        color: Colors.black45,
        width: 1.0,
      ),
    ),
  ),
  child: ListTile(
    title: Text("リスト1",
        style: TextStyle(
          locale: Locale("ja", "JP"),
        )
    ),
    trailing: Icon(Icons.keyboard_arrow_right),
    onTap: () {
      _navigatorResetPage();
    }, //
  ),
),

左右にアイコン2行テキスト

ListTile(
       leading: FlutterLogo(size: 56.0),
       title: Text('Two-line ListTile'),
       subtitle: Text('Here is a second line'),
       trailing: Icon(Icons.more_vert),
     ),

小技

heightで高さ幅を小さくできる。

new Container(
                height: 56.0,
                color: Colors.white,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: new ListTile(
                        leading: new CircleAvatar(
                          backgroundColor: StaticFunction.toColorByStr(
                              listdatas[index].color),
                          child: new Text(listdatas[index].thumbtitle,),
                          foregroundColor: Colors.white,
                        ),
                        title: new Text(listdatas[index].title,
                          style: TextStyle(
                              locale: Locale("ja", "JP")
                          ),
                        ),
                        subtitle: new Text(
                          listdatas[index].subtitle,
                          style: TextStyle(
                            locale: Locale("ja", "JP"),
                            fontSize: 10,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),