logic_packages_demo 0.0.4

A new Flutter package demo haha.

example/main.dart

import 'package:flutter/material.dart';
import 'package:logic_packages_demo/logic_packages_demo.dart';

//主题色
const Color weChatThemeColor = Color.fromRGBO(233, 233, 233, 1.0);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FriendsPage(),
    );
  }
}

class FriendsPage extends StatefulWidget {
  const FriendsPage({Key? key}) : super(key: key);

  @override
  State createState() => _FriendsPageState();
}

class _FriendsPageState extends State<FriendsPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  //创建字典，里面放item和高度的对应数据！
  final Map _groupOffsetMap = {
    indexWords[0]: 0.0,
    indexWords[1]: 0.0,
  };

  final List<Friends> _listDatas = [];
  late final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();

    // debugPrint('init来了！');
    _listDatas
      ..addAll(datas)
      ..addAll(datas);

    //通讯录数据进行排序
    _listDatas.sort((Friends a, Friends b) {
      return a.indexLetter!.compareTo(b.indexLetter!);
    });
    //通过循环计算，将每一个头的位置算出来，放入字典！
    double cellHeight = 54.0;
    double groupHeight = 30.0;
    double groupOffset = 0; //cellHeight * 4; //第一个Cell的位置，4个Cell的高度！
    for (int i = 0; i < _listDatas.length; i++) {
      if (i < 1) {
        //第一个Cell是有头的
        _groupOffsetMap.addAll({_listDatas[i].indexLetter: groupOffset});
        //保存完了，就要改变_groupOffset
        groupOffset += cellHeight + groupHeight;
      } else if (_listDatas[i].indexLetter == _listDatas[i - 1].indexLetter) {
        groupOffset += cellHeight;
      } else {
        //这部分有头了
        _groupOffsetMap.addAll({_listDatas[i].indexLetter: groupOffset});
        groupOffset += groupHeight + cellHeight;
      }
    }
  }

  //头部数据
  final List _headerData = <Friends>[
    // Friends(name: '新的朋友', imageAssets: 'images/icon_new_friends.png'),
    // Friends(name: '群聊', imageAssets: 'images/icon_group.png'),
    // Friends(name: '标签', imageAssets: 'images/icon_label.png'),
    // Friends(name: '公众号', imageAssets: 'images/icon_accounts.png')
  ];

  Widget _itemForRow(BuildContext context, int index) {
    //显示头部4个Cell
    if (index < _headerData.length) {
      return _FriendCell(
        imageAssets: _headerData[index].imageAssets,
        name: _headerData[index].name,
        //最后一个不显示分割线
        showLine: (index == _headerData.length - 1) ? false : true,
      );
    }
    int datasIndex = index - _headerData.length;
    //如果我和上一个头是一样的，就隐藏
    bool hiddenGroupTitle = (datasIndex > 0 &&
        _listDatas[datasIndex].indexLetter ==
            _listDatas[datasIndex - 1].indexLetter);

    //显示剩下的Cell
    return _FriendCell(
      name: _listDatas[datasIndex].name,
      imageUrl: _listDatas[datasIndex].imageUrl,
      groupTitle: hiddenGroupTitle ? null : _listDatas[datasIndex].indexLetter,
      //最后一个不显示分割线
      showLine: (index == _listDatas.length + 3) ? false : true,
    );
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        // actions: [
        //   GestureDetector(
        //     child: Container(
        //       margin: const EdgeInsets.only(right: 10),
        //       child: const Image(
        //         image: AssetImage('images/icon_friends_add.png'),
        //         width: 25,
        //       ),
        //     ),
        //     onTap: () {
        //       Navigator.of(context).push(MaterialPageRoute(
        //           builder: (BuildContext context) => const DiscoverChildPage(
        //                 title: '添加朋友',
        //               )));
        //     },
        //   ),
        // ],
        backgroundColor: weChatThemeColor,
        title: const Text('通讯录'),
      ),
      body: Stack(
        children: [
          //列表！
          Container(
            color: weChatThemeColor,
            child: ListView.builder(
              controller: _scrollController,
              itemBuilder: _itemForRow,
              itemCount: _listDatas.length + _headerData.length,
            ),
          ),
          //悬浮检索控件
          IndexBar(
            indexBarCallBack: (String str) {
              if (_groupOffsetMap[str] != null) {
                _scrollController.animateTo(
                  _groupOffsetMap[str],
                  duration: const Duration(milliseconds: 10),
                  curve: Curves.easeIn,
                );
              }
            },
          ),
        ],
      ),
    );
  }
}

class _FriendCell extends StatelessWidget {
  final String? imageUrl;
  final String? name;
  final String? groupTitle;
  final String? imageAssets;
  final bool? showLine;
  const _FriendCell(
      {Key? key,
      this.imageUrl,
      required this.name,
      this.groupTitle,
      this.imageAssets,
      this.showLine})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //头部
        Container(
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.only(left: 10),
          height: groupTitle != null ? 30 : 0,
          color: const Color.fromRGBO(1, 1, 1, 0.0),
          child: groupTitle != null
              ? Text(
                  groupTitle!,
                  style: const TextStyle(color: Colors.grey),
                )
              : null,
        ),
        //Cell的内容
        Container(
          color: Colors.white,
          child: Row(
            children: [
              //图片
              Container(
                margin: const EdgeInsets.all(10),
                width: 34,
                height: 34,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.0),
                  image: imageUrl != null
                      ? DecorationImage(image: NetworkImage(imageUrl!))
                      : DecorationImage(image: AssetImage(imageAssets!)),
                ),
              ),
              //昵称
              SizedBox(
                width: screenWidth(context) - 54,
                child: Column(
                  children: [
                    Container(
                      height: 44,
                      alignment: Alignment.centerLeft,
                      child: Text(
                        name!,
                        style: const TextStyle(fontSize: 18),
                      ),
                    ),
                    //分割线
                    Container(
                      height: showLine! ? 0.5 : 0.0,
                      color: weChatThemeColor,
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class Friends {
  final String? imageUrl;
  final String? imageAssets;
  final String? name;
  final String? indexLetter;
  //groupTitle！！

  Friends({this.imageUrl, this.name, this.indexLetter, this.imageAssets});
}

List<Friends> datas = [
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/27.jpg',
      name: 'Lina',
      indexLetter: 'L'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
      name: '菲儿',
      indexLetter: 'F'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/16.jpg',
      name: '安莉',
      indexLetter: 'A'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/31.jpg',
      name: '阿贵',
      indexLetter: 'A'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/22.jpg',
      name: '贝拉',
      indexLetter: 'B'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/37.jpg',
      name: 'Lina',
      indexLetter: 'L'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/18.jpg',
      name: 'Nancy',
      indexLetter: 'N'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/47.jpg',
      name: '扣扣',
      indexLetter: 'K'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/3.jpg',
      name: 'Jack',
      indexLetter: 'J'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/5.jpg',
      name: 'Emma',
      indexLetter: 'E'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/24.jpg',
      name: 'Abby',
      indexLetter: 'A'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/15.jpg',
      name: 'Betty',
      indexLetter: 'B'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/13.jpg',
      name: 'Tony',
      indexLetter: 'T'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/26.jpg',
      name: 'Jerry',
      indexLetter: 'J'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/men/36.jpg',
      name: 'Colin',
      indexLetter: 'C'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/12.jpg',
      name: 'Haha',
      indexLetter: 'H'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/11.jpg',
      name: 'Ketty',
      indexLetter: 'K'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/13.jpg',
      name: 'Lina',
      indexLetter: 'L'),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/23.jpg',
      name: 'Lina',
      indexLetter: 'L'),
];