Flutter-ListTile

ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中，我将用可视化的例子来说明所有的参数。

title

title 参数可以接受任何小部件，但通常是文本小部件

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

设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

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

静态方法 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');

          },

        ),

      ],

    );

  }

}

來源：https://www.jianshu.com/p/6488b2fa4f53

巴特西