「Flutter/UI/ListTile」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→小技) |
(→上下にボーダーのあるListTail) |
||
| (同じ利用者による、間の2版が非表示) | |||
| 行10: | 行10: | ||
) | ) | ||
), | ), | ||
| − | trailing: Icon(Icons. | + | 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> | ||
| + | |||
| + | ==左右にアイコン２行テキスト== | ||
| + | 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の１行を表す。
サンプル
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();
}, //
),
),
左右にアイコン２行テキスト
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,
),
),
),
),
],
),
),
