flutter制作一个聊天用户列表

图片圆角请参考此文章实现图片圆角的2中方式

先贴代码

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("这是标题"),
          ),
          body:HomeContent()
      ),
    );
  }
}

class HomeContent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          leading: ClipOval(
            child: Image.asset(
              'images/1.jpg',
              width: 50,
              height: 50,
              fit:BoxFit.cover ,
            ),
          ),
          title: Text(
            "张三丰",
            style: TextStyle(
                fontSize: 14,
              fontWeight: FontWeight.w600
            ),
          ),
          subtitle: Text(
              '这是一个二级标题',
              style: TextStyle(
                color: Color.fromARGB(100,102 , 102, 102),
                fontSize: 12
              ),

          ),
        ),
      ],
    );
  }
}

使用系统提供的 ListTile 来实现

ListTile 有三个属性需要注意

属性	解释
title	一级标题
subtitle	二级标题
leading	可以用来加载图片等Widget

所以我们用 leading 加载我们的头像, 使用title 加载昵称,用 subtitle 加载最后一句聊天内容

实现效果如下:

静态数据的效果

使用动态数据实现聊天列表

首先,准备基础数据

在lib/res/目录下,新建一个data.dart 文件,然后将下面的数据复制进去

List dataList = [
  {
    "userName":"张三丰",
    "detail":"正好有时间",
    "avatar":"http://i1.shaodiyejin.com/uploads/tu/201911/9999/147c65a52f.jpg",
  },{
    "userName":"张三",
    "detail":"你昨天去哪里了",
    "avatar":"http://i1.shaodiyejin.com/uploads/tu/201911/9999/bd4ddffcab.jpg",
  },{
    "userName":"李四",
    "detail":"哈哈哈,是吗",
    "avatar":"http://i1.shaodiyejin.com/uploads/tu/201911/9999/2bf680819f.jpg",
  }
];

在你的main方法文件的顶部,引入新建的文件
import 'res/data.dart';

然后,使用 ListView.builder 的方法,来遍历准备好的数据即可

注意, ListView.builder 必须指定 itemCount 你遍历数据的长度, itemBuilder 以及遍历的内容

itemBuilder 的值是包含2个参数的方法,context,index ,index就是每次遍历的下标,有下标就可以拿到属性值了

我们贴上完整代码

import 'package:flutter/material.dart';
import 'res/data.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("这是标题"),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: dataList.length,
      itemBuilder: (context,index){
        return ListTile(
          title: Text(dataList[index]['userName']),
          subtitle: Text(dataList[index]['detail']),
          leading: ClipOval(
            child: Image.network(
              dataList[index]['avatar'],
              width: 50,
              height: 50,
              fit: BoxFit.cover,
            ),
          ),
        );
      },
    );
  }
}

这样我们就通过动态数据来填充我们的聊天列表了,效果如下

动态数据后的效果

接下来我们优化一下代码

我们吧 itemBuilder 的值,封装一下,然后给他传递过来,因为他的值是一个带有2个参数的方法,所以我们自定义一个方法

我们查看源码发现

 Widget Function(BuildContext context, int index);

他的参数是一个返回类型是widget的方法,所以我们同样定义这样一个方法

 //自定义方法,必须包含2个参数,和builder的参数保持一直
  Widget _GetData(context,index){
    return ListTile(
      title: Text(dataList[index]['userName']),
      subtitle: Text(dataList[index]['detail']),
      leading: ClipOval(
        child: Image.network(
          dataList[index]['avatar'],
          width: 50,
          height: 50,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

然后,我们吧这个方法传递给他

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: dataList.length,
      itemBuilder:this._GetData,  //此处是吧自定义的方法名当做参数传递即可
    );
  }
}

OK.大功告成