如何在 setState 之后保留先例小部件答案

【问题标题】：How to keep precedent widgets after setState如何在 setState 之后保留先例小部件
【发布时间】：2020-12-24 22:28:52
【问题描述】：

我想为我创建的卡片创建一个动态列表视图，其中包含标题和内容。我正在解码从添加页面的两个文本字段收到的内容，但是当创建卡片时，它不能正常工作。对于第一张卡片，它可以完美运行，但是当创建第二张卡片时，两张卡片是相同的。我真的不知道如何在添加新卡时保留我的先例卡。如果您有任何想法或提示，请告诉我。先感谢您！这是我的代码：

class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
static List dreams = [];
static List contentCard = [];
String text;
String title;
@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: kEdgeColor,
  appBar: AppBar(
    backgroundColor: kEdgeColor,
    elevation: 0,
    title: Text('My dreams'),
  ),
  body: Container(
    decoration: BoxDecoration(
        color: Colors.black),
    child: ListView.builder(
        itemCount: dreams.length ,
        itemBuilder: (BuildContext ctxt, int index) {
          return new DreamCard(
            Content: text,
            title: title,
          );
        }
    )
  ),

  bottomNavigationBar: BottomAppBar(
    color: kEdgeColor,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [

        FlatButton(
          onPressed: (){
            Navigator.popAndPushNamed(context, '/public');
          },
          child: Icon(Icons.public),
          color: Colors.black,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        ),

        FlatButton(
          onPressed: (){
            Navigator.popAndPushNamed(context, '/');
          },
          child: Icon(Icons.bedtime),
          color: Colors.black,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        ),
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () async {
      final result = await Navigator.of(context).push(MaterialPageRoute(builder:      (context){return WritingPage();}));
      if (null != result) {
        dreams.add(result);
        Map<String, dynamic> resultat = jsonDecode(result);

        setState(() {text = resultat['text'];
        title = resultat['title'];});
      }
    },
    child: Icon(Icons.add, size: 30,color: Colors.black,),
    backgroundColor: Colors.white,


  ),
  );
  }
  }

【问题讨论】：

标签： function flutter dictionary dart setstate

【解决方案1】：

因为您只是在按下时更新标题和文本，而您的 DreamCard 具有相同的标题和文本，因为您没有按索引引用梦想列表中的项目。所以您在列表中的 DreamCard 看起来总是一样的。

if (null != result) {
    Map<String, dynamic> resultat = jsonDecode(result);

    // use setState to update your dreams list to trigger UI change
    setState(() {
        dreams.add(resultat);
    });
}

ListView.builder(
    itemCount: dreams.length ,
    itemBuilder: (BuildContext ctxt, int index) {
        // access item from dreams list by index
        return new DreamCard(
            Content: dreams[index]['text'],
            title: dreams[index]['title],
        );
    }
)

【讨论】：

【解决方案2】：

您的 itemBuilder 未在以下位置引用索引：

  child: ListView.builder(
    itemCount: dreams.length ,
    itemBuilder: (BuildContext ctxt, int index) {
      return new DreamCard(
        Content: text,
        title: title,
      );
    }

当然，所有卡片都将始终具有与范围内的任何内容相同的文本和标题。您需要将数据放入dreams 并引用dreams[index][?something?] 以获得适合此卡的两个值。

【讨论】：

【解决方案3】：

您看不到添加的下一个DreamCard 的正确文本，因为您将从WritingPage 页面收到的result 直接添加到梦想列表。然后，您将 JSON 解码 result 并设置变量 text 和 title 的值。最新的WritingPage 的这些值被发送到DreamCard，因此每个DreamCard 似乎都是相同的。相反，您应该对 dreams 列表进行 JSON 解码，并使用 dreams 列表中的 text 和 title。请进行以下更改。

     return new DreamCard(
        Content: jsonDecode(dreams[index])["text"],
        title: jsonDecode(dreams[index])["title"],
      );

【讨论】：