Flutter —— 通讯录页面&索引条

最新推荐文章于 2025-04-29 15:25:13 发布

原创

最新推荐文章于 2025-04-29 15:25:13 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文详细介绍了如何在Flutter中创建通讯录页面，包括设置公共常量、Appbar的定制、通讯录单元格的创建，以及分组显示。同时，还展示了如何构建索引条，包括使用Stack、监听触摸事件、动态计算滚动距离和气泡效果。通过这些步骤，实现了功能完整的通讯录界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter —— 通讯录页面&索引条

- 1. 通讯录页面
- 2. 索引条

1. 通讯录页面

做完了发现页面和我的页面，接下来做通讯录页面。将_currentIndex 改成1方便开发。
发现通讯录页面还是要用到之前的_themColor，那么就将_themColor抽取出来以便公用。
创建一个文件来存放这些需要公用的常量。然后放入主题色之后，在别的地方import这个文件就能使用了。

//主题色
const Color weChatThemColor = Color.fromRGBO(220, 220, 220, 1.0);

然后就可以将通讯录页面的Appbar的背景色改为weChatThemColor了，接下来要添加右上角的按钮，这里就可以用AppBar里面的actions。在actions里面添加一个图片，这里可以放多个，多个的话会从左到右排列。

 actions: [
          Container(
            margin: EdgeInsets.only(right: 10),
            child: Image(
              image: AssetImage("images/icon_friends_add.png"),
              height: 20,
              width: 20,
            ),
          ),
        ],

接着在Container外面包一层GestureDetector来添加手势响应。
在这里插入图片描述
接下来要做通讯录页的cell,那么如果只有通讯录页里面用，则可以放在一个文件里面，因为在一个文件里面，所以可以使用_令其私有，私有后本文件里面依然可以使用。

class _FriendCell extends StatelessWidget {
  _FriendCell({this.imageUrl, this.name, this.groupTitle, this.imageAssets});

  final String? imageUrl;
  final String? name;
  final String? groupTitle;
  final String? imageAssets;
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

根据需要的内容创建模型

class Friends {
  Friends({this.imageUrl, this.name, this.indexLetter,this.ImageAssets});
  final String? imageUrl;
  final String? name;
  final String? indexLetter;
  final String? ImageAssets;
}

创建完之后，可以将通讯录页面scaffold里面的body设为：

	Container(
        child: ListView.builder(
          itemBuilder: _itemForRow,
          itemCount: datas.length + _headerData.length,
        ),
        color: weChatThemColor,
      ),`

接下来添加头部四个的数据,这里是asset图片所以传ImageAssets。

  final List<Friends> _headerData = [
    Friends(ImageAssets: 'images/新的朋友.png', name: '新的朋友'),
    Friends(ImageAssets: 'images/群聊.png', name: '群聊'),
    Friends(ImageAssets: 'images/标签.png', name: '标签'),
    Friends(ImageAssets: 'images/公众号.png', name: '公众号'), 
  ];

然后构建_itemForRow方法,就是在_itemForRow里面判断如果小于_headerData的长度，则传入imageAssets，否则就是imageUrl。注意这里datas的index需要减去_headerData的长度，否则会缺少前面几个数据。

 Widget _itemForRow(BuildContext context, int index) {
    if (index < _headerData.length) {
      return _FriendCell(
          imageAssets: _headerData[index].ImageAssets,
          name: _headerData[index].name);
    } else {
      return _FriendCell(
          imageUrl: datas[index - _headerData.length].imageUrl, name: datas[index -  _headerData.length ].name);
    }
  }

然后开始写界面,这里简单的使用一个Row来包含图片和昵称，然后使用ClipRRect将图片剪裁为圆角矩形，并且判断imageUrl是否为空，不为空则使用NetworkImage加载网络图片，否则就使用AssetImage加载本地图片。

Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            width: 34,
            height: 34,
            child: ClipRRect(
              //剪裁为圆角矩形
              borderRadius: BorderRadius.circular(5.0),
              child: