Flutter 入門之 ListTile 使用指南

時間 2019-11-06

標籤 flutter 入門 listtile 使用指南简体版

原文原文鏈接

ListTile 一般用於在 Flutter 中填充 ListView。在這篇文章中，我將用可視化的例子來講明全部的參數。bash

title

title 參數能夠接受任何小部件，但一般是文本小部件app

ListTile(
  title: Text('Horse'),
)
複製代碼

subtitle

副標題是標題下面較小的文本less

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
)
複製代碼

dense

使文本更小，並將全部內容打包在一塊兒ide

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

設置拖尾將在列表的末尾放置一個圖像。這對於指示主-細節佈局特別有用。ui

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
)
複製代碼

contentPadding

設置內容邊距，默認是 16，但咱們在這裏設置爲 0this

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
  contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)
複製代碼

selected

若是選中列表的 item 項，那麼文本和圖標的顏色將成爲主題的主顏色。spa

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
  selected: true,
)
複製代碼

Gesture recognition

ListTile 能夠檢測用戶的點擊和長按事件，onTap 爲單擊，onLongPress 爲長按。對於波紋效果是內置的debug

ListTile(
  title: Text('Horse'),
  onTap: () {
    // do something
  },
  onLongPress: (){
    // do something else
  },
)
複製代碼

enabled

經過將 enable 設置爲 false，來禁止點擊事件3d

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');
          },
        ),
      ],
    );
  }
}
複製代碼