Flutter入门五：【我的】+【通讯录】 |
您所在的位置：网站首页 › 通讯录top和bottom › Flutter入门五：【我的】+【通讯录】 |
|
页面分为导航栏、滚动内容、索引栏。（滚动视图与索引栏使用Stack布局） 一、 导航栏： 设置背景颜色、字体颜色，隐藏分割线 添加新增朋友按钮（通过AppBar的actions属性添加手势Widget）二、滚动内容 【布局】每个数据都是一个cell视图，都包含组头（灰色字母头部）和好友信息（头像、名称、分割线）。组头由cell数据决定是否创建。 组头和好友信息使用Column布局，好友信息内部头像和名称+分割线使用Row布局，根据屏幕宽度计算宽度。名称和分割线使用Column布局，指定高度。2.【数据】_headDatas记录顶部4个固定数据(新的朋友、群聊、标签、公众号)，_listDatas记录其余好友数据，根据首字母进行 排序。 在initState()时，使用_groupOffsets（Map结构）记录每个索引的offset偏移值。 【交互】 使用ScrollController滚动对象记录当前的listView， IndexBar索引栏选中索引时，通过indexBarCallBack回调函数的index参数，在_groupOffsets（Map结构）中获取到指定高度，通过_scrollController.animateTo滚动到listView指定高度。三、索引栏 【布局】 有索引栏和选中气泡两大部件，使用Row布局。 分为选中（背景透明、字体黑色、无气泡）和未选中（背景灰色、字体白色、展示气泡）两种状态。 【数据】INDEX_WORDS包含搜索、星标、A~Z 28组数据。 【交互】选中与未选中会在自身布局上发生变化。也会通过indexBarCallBack函数，传递int类型的索引Index值，告知外部（外部listView会联动响应） 【优化点】 index值默认值为-1，避免每次进入页面时，listView滚动值与index索引不一致。 滚动时，index值未变化不会触发indexBarCallBack回调四、缺陷 每次进入页面，数据均刷新了，未保存状态。 listView的偏移值过大时（剩余内容高度不足listView满屏），不应滚动。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |