ListTile 通常用于在 Flutter 中填充 ListView祥款。在這篇文章中清笨，我將用可視化的例子來說明所有的參數(shù)。
title
title 參數(shù)可以接受任何小部件刃跛，但通常是文本小部件
ListTile(
title: Text('Horse'),
)
復制代碼
title.png
subtitle
副標題是標題下面較小的文本
ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
)
復制代碼
subtitle.png
dense
使文本更小抠艾，并將所有內容打包在一起
ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
dense: true,
)
復制代碼
dense.png
leading
將圖像或圖標添加到列表的開頭。這通常是一個圖標桨昙。
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
),
title: Text('Horse'),
)
復制代碼
leading.png
ListTile(
leading: Icon(Icons.home),
title: Text('House'),
)
復制代碼
leading1.png
trailing
設置拖尾將在列表的末尾放置一個圖像检号。這對于指示主-細節(jié)布局特別有用。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
)
復制代碼
trailing.png
contentPadding
設置內容邊距蛙酪，默認是 16齐苛，但我們在這里設置為 0
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)
復制代碼
contentPadding.png
selected
如果選中列表的 item 項，那么文本和圖標的顏色將成為主題的主顏色桂塞。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
)
復制代碼
selected.png
Gesture recognition
ListTile 可以檢測用戶的點擊和長按事件凹蜂，onTap 為單擊，onLongPress 為長按藐俺。對于波紋效果是內置的
ListTile(
title: Text('Horse'),
onTap: () {
// do something
},
onLongPress: (){
// do something else
},
)
復制代碼
Gesture.gif
enabled
通過將 enable 設置為 false炊甲，來禁止點擊事件
ListTile(
title: Text('Horse'),
onTap: () {
// this will not get called
},
enabled: false,
)
復制代碼
enabled.png
ListTile.divideTiles
靜態(tài)方法 divideTiles 可以在 titles 之間添加分隔符，這個顏色有點淡欲芹，需要看仔細點才能看出來卿啡，哈哈哈哈
ListView(
children: ListTile.divideTiles(
context: context,
tiles: [
ListTile(
title: Text('Horse'),
),
ListTile(
title: Text('Cow'),
),
ListTile(
title: Text('Camel'),
),
ListTile(
title: Text('Sheep'),
),
ListTile(
title: Text('Goat'),
),
]
).toList(),
)
復制代碼
divideTiles.png
使用實例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(title: Text('ListTile guide')),
body: BodyWidget(),
),
);
}
}
String horseUrl = 'https://i.stack.imgur.com/Dw6f7.png';
String cowUrl = 'https://i.stack.imgur.com/XPOr3.png';
String camelUrl = 'https://i.stack.imgur.com/YN0m7.png';
String sheepUrl = 'https://i.stack.imgur.com/wKzo8.png';
String goatUrl = 'https://i.stack.imgur.com/Qt4JP.png';
class BodyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(horseUrl),
),
title: Text('Horse'),
subtitle: Text('A strong animal'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('horse');
},
selected: true,
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(cowUrl),
),
title: Text('Cow'),
subtitle: Text('Provider of milk'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('cow');
},
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(camelUrl),
),
title: Text('Camel'),
subtitle: Text('Comes with humps'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('camel');
},
enabled: false,
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(sheepUrl),
),
title: Text('Sheep'),
subtitle: Text('Provides wool'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('sheep');
},
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(goatUrl),
),
title: Text('Goat'),
subtitle: Text('Some have horns'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('goat');
},
),
],
);
}
}
復制代碼
demo.png
code.png
