如何使用 Flutter(Dart) 在 ListView 中显示通话记录

Question

我在我的 flutter 应用程序中添加了 call_log: ^2.0.2 依赖项。但无法获取通话记录并插入到列表视图中。如何获取通话记录并将其添加到列表视图中？

这是我的代码。我想将所有通话记录插入此列表视图。我创建了三个选项卡，每个选项卡都包含列表视图。我想在第一个选项卡中插入通话记录，在第二个选项卡中插入消息。

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Iterable<CallLogEntry> _callLogEntries = [];
  @override
  Widget build(BuildContext context) {
    var mono = TextStyle(fontFamily: 'monospace');
    var children = <Widget>[];
    _callLogEntries.forEach((entry) {
      children.add(
        Column(
          children: <Widget>[
            Divider(),
            Text('F. NUMBER: ${entry.formattedNumber}', style: mono),
            Text('NUMBER   : ${entry.number}', style: mono),
            Text('NAME     : ${entry.name}', style: mono),
            Text('TYPE     : ${entry.callType}', style: mono),
            Text(
                'DATE     : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}',
                style: mono),
            Text('DURATION :  ${entry.duration}', style: mono),
          ],
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
        ),
      );
    });
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            elevation: 5,
            backgroundColor: Colors.black,
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.call)),
                Tab(icon: Icon(Icons.message)),
                Tab(icon: Icon(Icons.location_on)),
              ],
            ),
            title: Text('Device Monitor'),
          ),
          body: TabBarView(
            children: [
              Scrollbar(
                child: ListView(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  children: [
                    Icon(Icons.call),
                    for (int index = 1; index < 21; index++)
                      ListTile(
                        leading: ExcludeSemantics(
                          child: CircleAvatar(child: Text('$index')),
                        ),
                        title: Text('item $index'),
                      ),
                  ],
                ),
              ),
              Scrollbar(
                child: ListView(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  children: <Widget>[Icon(Icons.message), Text('test')],
                ),
              ),
              Icon(Icons.location_on),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您没有收到通话记录。相反，您将 _callLogEntries 分配给 []（一个空数组）。

在 ListView 中加载通话记录的一种好方法是使用 FutureBuilder。

FutureBuilder(
  future: CallLog.get(),
  builder: (context, snapshot){
    if(!snapshot.hasData) return Center(child: CirculaProgressIndicator());

    List<CallLogEntry> entries = snapshot.data;
    return ScrollBar(
       child: ListView.builder(
          itemBuilder: (contex, index){
             var entry = entries[index];
             return Column(
                  children: <Widget>[
                     Divider(),
                     Text('F. NUMBER: ${entry.formattedNumber}', style: mono),
                     Text('NUMBER   : ${entry.number}', style: mono),
                     Text('NAME     : ${entry.name}', style: mono),
                     Text('TYPE     : ${entry.callType}', style: mono),
                     Text('DATE     : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}', style: mono),
                     Text('DURATION :  ${entry.duration}', style: mono),
                  ],
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
            );
        },
        itemCount: entries.length,
       ),
     );
)

Answer 2

使用 FutureBuilder 会很简单，您应该在 snapshot.data

之后添加 .toList()

FutureBuilder(
  future: CallLog.get(),
  builder: (context, snapshot) {
    if (!snapshot.hasData)
      return Center(child: CircularProgressIndicator());

    List<CallLogEntry> entries = snapshot.data.toList();
    return Scrollbar(
      child: ListView.builder(
        itemBuilder: (context, index) {
          var entry = entries[index];
          var mono = TextStyle(fontFamily: 'monospace');
          return Column(
            children: <Widget>[
              Divider(),
              Text('F. NUMBER: ${entry.formattedNumber}',
                  style: mono),
              Text('NUMBER   : ${entry.number}', style: mono),
              Text('NAME     : ${entry.name}', style: mono),
              Text('TYPE     : ${entry.callType}', style: mono),
              Text(
                  'DATE     : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}',
                  style: mono),
              Text('DURATION :  ${entry.duration}',
                  style: mono),
            ],
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
          );
        },
        itemCount: entries.length,
      ),
    );
  }),

如何使用 Flutter(Dart) 在 ListView 中显示通话记录

How to show call log in a ListView with Flutter(Dart)

calllog

dart

flutter