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

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

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

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

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:
 
### 如何使用 Flutter 开发班级通讯录 App #### 创建项目结构 为了创建一个功能齐全的班级通讯录应用,首先需要初始化一个新的 Flutter 项目并设置基本文件夹结构。 ```bash flutter create class_contact_app cd class_contact_app ``` 这会建立必要的目录和初始配置文件[^1]。 #### 添加依赖项 在 `pubspec.yaml` 文件中添加所需包来增强应用程序的功能: ```yaml dependencies: flutter: sdk: flutter provider: ^6.0.5 sqflite: ^2.2.8+4 path_provider: ^2.0.15 ``` 这些库提供了状态管理、本地数据库操作以及路径处理的能力[^2]。 #### 设计数据模型 定义学生实体类用于表示每位同学的信息。可以在 lib/models/student.dart 中实现如下代码片段: ```dart class Student { final int id; String name; String phoneNumber; Student({required this.id, required this.name, required this.phoneNumber}); factory Student.fromMap(Map&lt;String, dynamic&gt; map) =&gt; Student( id: map[&#39;id&#39;], name: map[&#39;name&#39;], phoneNumber: map[&#39;phoneNumber&#39;], ); Map&lt;String, dynamic&gt; toMap() =&gt; { &#39;id&#39;: id, &#39;name&#39;: name, &#39;phoneNumber&#39;: phoneNumber, }; } ``` 此部分实现了学生的属性及其序列化方法[^3]。 #### 构建UI界面 通过 StatefulWidget 和 StatelessWidget 来构建用户交互页面。下面是一个简单的列表视图例子,在 lib/screens/home_screen.dart 实现: ```dart import &#39;package:flutter/material.dart&#39;; import &#39;../models/student.dart&#39;; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { List&lt;Student&gt; students = [ // 假设这里已经加载了一些默认的学生对象... ]; return Scaffold( appBar: AppBar(title: Text(&#39;班级通讯录&#39;)), body: ListView.builder( itemCount: students.length, itemBuilder: (context, index) { var student = students[index]; return ListTile( title: Text(student.name), subtitle: Text(student.phoneNumber), ); }), ); } } ``` 这段代码展示了如何展示存储于内存中的联系人信息[^4]。 #### 数据持久化 利用 SQLite 数据库存储长期保存的数据。可以参考官方文档了解更详细的 API 使用说明[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值