如何使用共享首选项在Flutter的有状态小部件中填充字符串项列表

rqqzpn5f  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(91)

我想使用共享首选项来存储用户创建的文件名列表。启动应用时,我想通过从共享首选项阅读这些文件名来显示这些文件名的列表。如何读取共享首选项数据(从异步函数)并将数据填充到有状态小部件中的ListView中?

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

  @override
  State<ListCard> createState() => _ListCardState();
}

class _ListCardState extends State<ListCard> {
  late List _dbList;

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

    _dbList = getDBNames().split(',');
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _dbList.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Text(
              _dbList[index],
            ),
          ),
        );
      },
    );
  }
}

获取文件名的函数

getDBNames() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();

  var dbNames = prefs.getString('dbNames') ?? '';
  return dbNames.split(',');
}

这将显示以下错误消息

Class 'Future<dynamic>' has no instance method 'split'.
Receiver: Instance of 'Future<dynamic>'

如何修改代码以使用Future?
顺便说一句,有没有一种方法可以在应用程序启动时读取sqlite数据库列表,并在ListView中显示相同的数据库?

xriantvc

xriantvc1#

getDBNames是Future方法,您可以使用FutureBuilder

class _ListCardState extends State<ListCard> {
  late final future = getDBNames();
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String?>(
        future: future,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            if (snapshot.data == null) return Text("got null data");
            final _dbList = snapshot.data!.split(",");
            return ListView.builder(
              itemCount: _dbList.length,
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Text(
                      _dbList[index],
                    ),
                  ),
                );
              },
            );
          }
          return CircularProgressIndicator();
        });
  }
}

查找更多关于FutureBuilder的信息。您也可以将列表保存在sharedPreference上
您也可以使用.then并调用setState,但这样看起来不太好。

相关问题