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