ListTile 通常用於在 Flutter 中填充 ListView。在這篇文章中，我將用視覺化的例子來說明所有的引數。
title
title 引數可以接受任何小部件，但通常是文字小部件
ListTile(
title: Text('Horse'),
)
複製程式碼subtitle
副標題是標題下面較小的文字
ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
)
複製程式碼dense
使文字更小，並將所有內容打包在一起
ListTile(
title: Text('Horse'),
subtitle: Text('A strong animal'),
dense: true,
)
複製程式碼leading
將影象或圖示新增到列表的開頭。這通常是一個圖示。
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
),
title: Text('Horse'),
)
複製程式碼ListTile(
leading: Icon(Icons.home),
title: Text('House'),
)
複製程式碼trailing
設定拖尾將在列表的末尾放置一個影象。這對於指示主-細節佈局特別有用。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
)
複製程式碼contentPadding
設定內容邊距，預設是 16，但我們在這裡設定為 0
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)
複製程式碼selected
如果選中列表的 item 項，那麼文字和圖示的顏色將成為主題的主顏色。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
selected: true,
)
複製程式碼Gesture recognition
ListTile 可以檢測使用者的點選和長按事件，onTap 為單擊，onLongPress 為長按。對於波紋效果是內建的
ListTile(
title: Text('Horse'),
onTap: () {
// do something
},
onLongPress: (){
// do something else
},
)
複製程式碼enabled
通過將 enable 設定為 false，來禁止點選事件
ListTile(
title: Text('Horse'),
onTap: () {
// this will not get called
},
enabled: false,
)
複製程式碼ListTile.divideTiles
靜態方法 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(),
)
複製程式碼使用例項
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');
},
),
],
);
}
}
複製程式碼作者介紹
- 陳堅潤：廣州蘆葦科技 APP 團隊 Android 開發工程師
內推資訊
- 我們正在招募小夥伴，有興趣的小夥伴可以把簡歷發到 app@talkmoney.cn，備註：來自掘金社群
- 詳情可以戳這裡--> 廣州蘆葦資訊科技