Flutter中如何在ListView列表项文本前添加CircleAvatar组件

开发中使用GestureDetector组件实现支持点击交互的联系人列表时，无法在每个联系人名称前添加CircleAvatar头像图标，初始实现代码如下：

return Scaffold(
        body: new ListView.builder(
      //return ListView.builder(
        itemCount: _contacts!.length,
        itemBuilder: (BuildContext context, int index) {

       return new GestureDetector(
        child: SizedBox(
           height: 75.0,
           child: Text(_contacts![index].displayName),
            
        ),

      onTap: () {
        speak(_contacts![index].displayName);
      },
      onDoubleTap: (){
        speak("double tapped");
      },

    );}));

参考预期效果：

初始实现的SizedBox节点下仅直接挂载了Text文本组件，没有使用横向布局容器承载「头像+名称」的并排排列结构，没有预留头像组件的挂载位置，因此无法正常显示前置头像。

使用Row横向布局组件替换SizedBox下的直接子节点，按顺序在Row中放入CircleAvatar头像、间距组件、联系人名称文本即可，修复后的可运行代码：

return Scaffold(
  body: ListView.builder(
    itemCount: _contacts!.length,
    itemBuilder: (BuildContext context, int index) {
      return GestureDetector(
        child: SizedBox(
          height: 75.0,
          // 横向布局摆放头像和名称
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 前置头像
              CircleAvatar(
                // 默认取联系人名称第一个字作为头像显示内容，可按需替换为图片资源
                child: Text(_contacts![index].displayName.substring(0, 1)),
              ),
              // 头像和名称之间的水平间距
              const SizedBox(width: 16),
              // 联系人名称文本
              Text(_contacts![index].displayName),
            ],
          ),
        ),
        onTap: () {
          speak(_contacts![index].displayName);
        },
        onDoubleTap: () {
          speak("double tapped");
        },
      );
    },
  ),
);

• 可通过修改CircleAvatar的radius、backgroundColor参数自定义头像大小、配色，也可传入backgroundImage参数加载网络/本地头像图片
• 可给Row外层包裹Padding组件设置横向内边距，避免列表内容贴靠屏幕边缘
• 若需要符合Material Design的点击水波纹反馈，可将GestureDetector替换为InkWell组件，交互体验更贴合系统规范

内容的提问来源于stack exchange，提问作者simsim