dart - 在 Flutter 中动态销毁和构建卡片

Question

我是 Flutter 新手，
我想销毁最初创建的卡片，然后根据 API 调用中提供的数据重新构造它们。
基本上当我点击 UI 中的按钮时，它应该调用 API 并根据 API 调用的数据，如果它与我已有的数据不同，我想销毁卡片并重新构造它们。我怎样才能做到这一点？

Answer 1

当您再次调用电话时，卡片会自动更新其内容，就像刷新您的数据一样。

我用一张卡片做了一个简单的例子，显示来自 this JSON 的数据我第一次在 initState 中调用 API，然后在每次按下 FAB 时重复调用。

我添加索引变量只是为了向您显示更新(用列表中的下一项更新我的单张卡片)

另外值得注意的是，为了节省时间，我处理 null 或空值的方式很差。

也忘记 UI 溢出 ¯_(ツ)_/¯

class CardListExample extends StatefulWidget {
  @override
  _CardListExampleState createState() => new _CardListExampleState();
}

class _CardListExampleState extends State<CardListExample> {
  Map cardList = {};
  int index = 0;

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

  _getRequests() async {
    String url = "https://jsonplaceholder.typicode.com/users";
    var httpClinet = createHttpClient();
    var response = await httpClinet.get(
      url,
    );
    var data = JSON.decode(response.body);
    //print (data);
    setState(() {
      this.cardList = data[index];
      this.index++;
    });
    print(cardList);
    print(cardList["name"]);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton:
          new FloatingActionButton(onPressed: () => _getRequests()),
      appBar: new AppBar(
        title: new Text("Card List Example"),
      ),
      body: this.cardList != {}
          ? new ListView(children: <Widget>[
              new Card(
                child: new Column(
                  children: <Widget>[
                    new Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        new Text(
                          cardList["name"] ?? '',
                          style: Theme.of(context).textTheme.display1,
                        ),
                        new Text(
                          this.cardList['email'] ?? '',
                          maxLines: 50,
                        ),
                      ],
                    ),
                    new Text(cardList["website"] ?? '')
                  ],
                ),
              ),
            ])
          : new Center(child: new CircularProgressIndicator()),
    );
  }
}