1. 基本介紹

ListTile 是一個(gè)固定高度的行欠母，通常包含一個(gè)行前、行尾圖標(biāo)吆寨，以及一些文本赏淌。

ListTile.png

2. 示例代碼

代碼下載地址。如果對(duì)你有幫助的話(huà)記得給個(gè)關(guān)注啄清，代碼會(huì)根據(jù)我的 Flutter 專(zhuān)題不斷更新六水。

3. 屬性介紹

4. ListTile 詳解

ListTile 使用并不復(fù)雜，demo 中詳細(xì)的介紹了各個(gè)屬性的功能及樣式该押。

import 'package:flutter/material.dart';

class FMListTileVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("ListTile"),),
      body: ListView(
        children: [
          _normalListTile(true),
          _normalListTile(false),
          _shapeListTile(true),
          _shapeListTile(false),
        ],
      ),
    );
  }
  
  ListTile _normalListTile(bool selected,){
    return ListTile(
      leading: Icon(Icons.ac_unit), // 左側(cè)組件
      title: Text("title"), // 標(biāo)題
      // 副標(biāo)題
      subtitle: Text("subTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitlesubTitle"),
      trailing: Icon(Icons.access_alarm), // 右側(cè)組件
      isThreeLine: true, // 是否三行疗杉，其實(shí)沒(méi)啥用，但是設(shè)置為 true 時(shí)蚕礼，subTitle 不可以為空
      dense: false, // 是否使用縮小布局
      visualDensity: VisualDensity(horizontal: -4), // 緊湊程度
      contentPadding: EdgeInsets.all(20), // content 內(nèi)間距
      enabled: true, // 是否可用烟具，僅改變顏色
      // 點(diǎn)擊事件回調(diào)
      onTap: (){
        print("onTap");
      },
      // 長(zhǎng)按事件回調(diào)
      onLongPress: (){
        print("onLongPress");
      },
      // 是否選中
      selected: selected,
    );
  }

  ListTile _shapeListTile(bool selected,){
    return ListTile(
      leading: Container(
        width: 100,
        color: Colors.yellow,
        child: Image.network("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
      ), // 左側(cè)組件
      title: Row(
        children: [
          Icon(Icons.title),
          Text("title"),
        ],
      ), // 標(biāo)題
      // 副標(biāo)題
      subtitle: Row(
        children: [
          Icon(Icons.content_copy),
          Text("subTitle"),
        ],
      ),
      trailing: Container(
        width: 100,
        child: Image.network("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
      ), // 右側(cè)組件
      isThreeLine: true, // 是否三行，其實(shí)沒(méi)啥用奠蹬，但是設(shè)置為 true 時(shí)朝聋，subTitle 不可以為空
      dense: false, // 是否使用縮小布局
      visualDensity: VisualDensity(horizontal: -4), // 緊湊程度
      contentPadding: EdgeInsets.all(20), // content 內(nèi)間距
      enabled: true, // 是否可用，僅改變顏色
      // 形狀囤躁，這里邊緣顏色無(wú)效冀痕，再點(diǎn)擊時(shí)陰影可以看出來(lái)效果
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
        side: BorderSide(
          color: Colors.red,
          width: 2,
        ),
      ),
      // 點(diǎn)擊事件回調(diào)
      onTap: (){
        print("onTap");
      },
      // 長(zhǎng)按事件回調(diào)
      onLongPress: (){
        print("onLongPress");
      },
      // 是否選中
      selected: selected,
    );
  }
}

ListTile.gif

ListTile shape.png

5. 技術(shù)小結(jié)

ListTile 就是一個(gè)非常簡(jiǎn)單的行容器荔睹，可以理解為 ListView.item 或者 UITableViewCell。