如何存储和检索 List<Widgets> 以实现持久性

问题描述

我是 UI 编程/应用开发的新手。

我的目标是拥有一个屏幕/页面/任何可以安排不同小部件的东西。

当然，这个“布局”应该以某种方式保存，但我不知道如何保存。

这是您可以安排小部件的页面：

  
  const MyDesign({Key key,this.designName}):super(key: key);
  
  final String designName;

  @override
  _MyDesignState createState() => _MyDesignState();
}

class _MyDesignState extends State<MyDesign> {

  List<Widget> movableItems = [];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.designName),),floatingActionButton: FloatingActionButton(
        onpressed: () {
          setState(() {
            movableItems.add(MoveableStackItem(item: Knob(),));
          });
        }
        ),body: Stack(
        children: 
          movableItems,);
  }
} 

如您所见，我使用 List 来存储可移动对象，并使用 Stack 来绘制它们。

是否有可能为此页面的特定实例存储此小部件列表并在关闭应用程序后检索它？

我还希望有可能创建多个“布局”，这是我的方法：

class MyHomePage extends StatefulWidget {
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<MyDesign> myDesignPages = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),floatingActionButton: FloatingActionButton(
        onpressed: () async {
          final String dname = (await _asyncInputDialog(context)) as String;
          setState(() {
            myDesignPages.add(new MyDesign(designName: dname,));
          });
        },child: Icon(Icons.add),body: 
        new ListView.builder(
          itemCount: myDesignPages.length,itemBuilder: (BuildContext context,int i){
            return ListTile(
              title: Text(myDesignPages[i].designName),onTap: () {
                Navigator.push<dynamic>(
                  context,MaterialPageRoute<dynamic>(
                    builder: (context) => myDesignPages[i]) );
              },);
          }
        ),);
  }

}

我认为我在这里完全偏离了轨道。为此，我很高兴有这样的地方存在。

非常感谢

解决方法

回答您的第一个问题：是的，可以将列表内容编码并保存为字符串，然后通过解码保存的字符串来检索它。例如，要将字符串保存为 key value 对，您可以使用此插件 Shared preferences。要对您的列表进行编码和解码，您可以分别使用 jsonEncode 包中的 jsonDecode 和 dart:convert