facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
行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>
 +
 
==小技==
 
==小技==
 
heightで高さ幅を小さくできる。
 
heightで高さ幅を小さくできる。

2019年11月27日 (水) 01:56時点における版

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();
    }, //
  ),
),

小技

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