Flutter逻辑包管理插件logic_packages_demo的潜在功能

Flutter逻辑包管理插件logic_packages_demo的潜在功能

引言

在Flutter开发中，逻辑包管理是一个重要的部分。本文将展示如何使用logic_packages_demo插件来实现高效的逻辑包管理。通过以下示例代码，我们将展示该插件的功能及其在实际应用中的潜力。

示例代码解析

以下是完整的示例代码，展示了如何使用logic_packages_demo插件来构建一个通讯录页面。

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});

  // 这是应用程序的根组件。
  [@override](/user/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](/user/override)
  State createState() => _FriendsPageState();
}

class _FriendsPageState extends State<FriendsPage>
    with AutomaticKeepAliveClientMixin {
  [@override](/user/override)
  bool get wantKeepAlive => true;

  // 创建字典，用于存储每个分组的偏移量
  final Map<String, double> _groupOffsetMap = {
    indexWords[0]: 0.0,
    indexWords[1]: 0.0,
  };

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

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化数据
    _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.0; // 第一个Cell的位置
    for (int i = 0; i < _listDatas.length; i++) {
      if (i < 1) {
        // 第一个Cell有头
        _groupOffsetMap.addAll({_listDatas[i].indexLetter: 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<Friends> _headerData = [
    // 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);

    // 渲染通讯录项
    return _FriendCell(
      name: _listDatas[datasIndex].name,
      imageUrl: _listDatas[datasIndex].imageUrl,
      groupTitle: hiddenGroupTitle ? null : _listDatas[datasIndex].indexLetter,
      showLine: (index == _listDatas.length + 3) ? false : true,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        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](/user/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,
        ),
        // 通讯录项内容
        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;

  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'),
];