This article belongs to the Flutter Weekly component series. Other components can view this series of articles. This series will be updated constantly. Demo of all components has been uploaded with values Github: github.com/xj124456/fl… Welcome to Star

Blog: Si Fu, Dig gold, Zhihu, Jian Shu, MOOC, CSDN, Blog Park, DX front-end public number: DX front-end framework knowledge base contact me: public number menu click to contact me

Usage scenarios

  1. A single line of fixed height, usually containing some text and leading or trailing ICONS.
  2. When you want to give a list a list, you can do it with a ListTile, which displays the elements line by line, and you can bind events to each element, so a ListTile is a row

preview

Component Parameter Description

Const ListTile({Key Key, this.leading, // left component this.title, // middle main title this.subtitle, // middle subtitle this.trailing, // right component, IsThreeLine = false, // whether three lines of this.dense are displayed, // Whether they are vertically dense, This.visualdensity, this.shape, // Define the appearance shape this.contentPadding, // Margin between the content and the border, Default 16 this.enabled = true, // Can you interact with event this.onTap, // Click event this.onLongPress, // Long press event this.mouseCursor, // Hover over the ListTile. This. Selected = false for the web. The text and icon will render this.focusColor, this.hoverColor, // the color of this.focusNode hovering over the ListTile, // the focus event this.autofocus = false, This. SelectedTileColor, //listTile background color, selected=false})Copy the code

Case code

Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Row( mainAxisAlignment: MainAxisAlignment spaceBetween, children: [Text (' Flutter ListTile '), the Text (' Flutter components (by DX front-end) every Monday, style: TextStyle(fontSize: 12.0,),),), body: Center(Child: Column(mainAxisAlignment: MainAxisAlignment. Center, children: [ListTile (leading: Icon (the Icons. Graphic_eq), title: Text (' this is the main title), trailing: Icon(icons.chevron_right),), Divider(), ListTile(leading: Icon(icons.waves), title: Text(' this is the main title '), subtitle: Text(' this is the subtitle '), trailing: Icon(icons.chevron_right),), Divider(), ListTile(leading: Icon(icons.ballot), title: Subtitle: Text(' trailing ', 'trailing', 'trailing '), // isThreeLine: true, subtitle: Text(' trailing', 'trailing', 'trailing '), trailing: Icon(Icons.chevron_right), ), Divider(), ], )), ); }Copy the code

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement! Search the official wechat account [DX front-end framework knowledge base] to find more front-end knowledge and practical knowledge of Vue, React, Flutter, Uniapp, Nodejs, Html/Css, etc.

DX front-end, share front-end framework knowledge base, see article: DX front-end