dart 如何在Flutter中添加类似WhatsApp的日期标题?

mwkjh3gx  于 2022-12-27  发布在  Flutter
关注(0)|答案(1)|浏览(168)

我想像WhatsApp添加日期标题。
下面是两个例子:

我已经阅读了此question并参考了thisthis的答案,但有一个问题。
我可以使用grouped_liststicky_grouped_list包,但是没有cacheExtent字段,所以对我来说没有用。
我的代码:

ListView.builder(
  cacheExtent: 9999.0,
  controller: controller,
  itemCount: itemCount,
  itemBuilder: (context, index) => ChatBubble(),
),

我希望我可以做一些自定义代码或其他包。
如果您需要更多信息,请随时发表评论。
如何在Flutter中添加类似WhatsApp的日期标题?我将非常感谢任何帮助。提前感谢!

ee7vknir

ee7vknir1#

我为我的项目做了这个,我为你做了简单的,你可以自定义,这是基本的想法:

class MyList<T> extends StatelessWidget {
  final List<T> listModel;
  final double? cacheExtent;
  final Widget Function(BuildContext, int index) listBuilder;
  final List<Widget? Function(T listValue)> separatorsBuilder;
  const MyList({Key? key,required this.listModel, required this.listBuilder, required this.separatorsBuilder, this.cacheExtent}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final childreen = _buildChildreen(context);
    return ListView.builder(
        cacheExtent: cacheExtent,
        itemCount: childreen.length,
        itemBuilder: (context, index){
      return childreen[index];
    });
  }

  List<Widget> _buildChildreen(BuildContext context){
    List<T> remain = List.from(listModel);
    List<Widget> result = [];
    int separatorCount = 0;
      for (var separator in separatorsBuilder){
        bool separatorUsed = false;
        while(remain.isNotEmpty){
          if(separator(remain.first) != null){
            if(!separatorUsed){
              result.add(separator(remain.first)!);
              separatorUsed = true;
              separatorCount++;
            }
            final index = result.length - separatorCount;
            result.add(listBuilder(context, index));
            remain.removeAt(0);
          }
          else {
            break;
          }
        }
      }

    return result;
  }
}

我在示例中使用的列表:

final now = DateTime.now();

    List<MyModel> myModel = [
      MyModel(message: 'hello, yesterday', dateTime: now.subtract(const Duration(days: 1))),
      MyModel(message: 'hello, this from yesterday', dateTime: now.subtract(const Duration(days: 1))),
      MyModel(message: 'hello, this me yesterday', dateTime: now.subtract(const Duration(days: 1))),
      MyModel(message: 'yes, this is now', dateTime: now),
      MyModel(message: 'sure this message is today', dateTime: now),
      MyModel(message: 'this message sent today', dateTime: now),
    ];

在窗口小部件树中按如下方式使用:

MyList<MyModel>(
                  listModel: myModel,
                  listBuilder: (context, index) {

                    return ListTile(
                      title: Text(myModel[index].message),
                    );
                  },
                  separatorsBuilder: [
                    (data) {
                      if (data.dateTime.isYesterday()) {
                        return Container(color: Colors.blue,child: const Text("Yesterday"));
                      }
                      return null;
                    },
                    (data) {

                      if (data.dateTime.isToday()) {
                        return Container(color: Colors.blue,child: const Text("Today"));
                      }
                      return null;
                    }
                  ])

我的模型:

class MyModel {
  String message;
  DateTime dateTime;

  MyModel({required this.message, required this.dateTime});
}

一些扩展在您情况下会很有用:

extension DateHelpers on DateTime {
  bool isToday() {
    final now = DateTime.now();
    return now.day == day &&
        now.month == month &&
        now.year == year;
  }

  bool isYesterday() {
    final yesterday = DateTime.now().subtract(const Duration(days: 1));
    return yesterday.day == day &&
        yesterday.month == month &&
        yesterday.year == year;
  }
}

相关问题