Question

我正在尝试使用GriView张卡片来构建Flutter应用程序，我想在每次点击floatingActionButton时添加一张新卡片。但是如何更新我的看法？我知道这些项目已添加到我的列表中，但是GridView没有显示更改。

  List<Widget> cardsList = [];

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Team Kitty'),
      ),
      body: GridView.builder(
          itemCount: cardsList.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return Container(child: cardsList[index]);
          }),
      floatingActionButton: new FloatingActionButton(
        onPressed: addCard(),
        tooltip: 'Add Card',
        child: new Icon(Icons.add),
      ),
    );
  }
  addCard() {
    setState(() {
      cardsList.add(_RobotCard());
    });
  }
}

我发现很难找到好的Grid文档，也许有人有提示吗？

Thx Guys

Answer 1

您在构建窗口小部件时调用 addCard 方法，而不是将方法的引用作为deck = [card(color, degree, symbol, number) for color in colors \ for degree in degrees for symbol in symbols for number in numbers]参数传递：

onPressed

Answer 2

现在回答还为时已晚，但这可能会帮助来这里的人找到解决类似问题的方法。

问题是，列表将使用值更新，但构建器不会立即重建屏幕可见区域中的列表。如果假设您的卡片列表很长，并且如果向列表中添加新项目，则不会立即对其进行重建。要查看更改，请继续向下滚动列表，然后再返回，然后您可以看到构建器已重建列表。因此，在未找到任何相关答案后解决此问题，我尝试了一下，也许它不是最佳解决方案，但它可以工作。该方法是，如果您有列表

列出CardList = List（）;

，它最初有5个项目。因此，构建器将在屏幕上构建5张卡片。然后，如果添加了新的第六项，即使您这样做

setState((){ 
  CardList.add(newItem);
})

Builder不会立即重建。要解决此问题，请使用Widget类型的变量，并使用空Text初始化。

Widget WidgetToBeShownInBody = Text("");

在脚手架下使用它，如图所示：

@override Widget build(BuildContext context) {
return new Scaffold(
  appBar: AppBar(
    title: Text('Team Kitty'),
  ),
  body: WidgetToBeShownInBody,

  floatingActionButton: new FloatingActionButton(
    onPressed: addCard(),
    tooltip: 'Add Card',
    child: new Icon(Icons.add),
  ),
);}

并以此修改onPressed函数，因此，每按一次该按钮，支架中的空白文本就会显示几毫秒（可以忽略不计，并且不会被注意），然后更新的卡片列表就会显示在屏幕上。

addCard() {
  //Show Empty Widget for few milliseconds
  setState(() {
    WidgetToBeShownInBody=Text("");
  });
  //update the list with new Item.
  cardList.add(SomeNewItem);
  //after some milliseconds ,
  //use setState to update the variable to list of cards returned by GridViewBuilder
  Timer(Duration(milliseconds: 50), () {
    setState(() {
      WidgetToBeShownInBody=GridView.builder(
          itemCount: cardsList.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return Container(child: cardsList[index]);
          });
    });

  });
}

上面的代码有点愚弄build函数，现在UI仅具有一个简单的空文本。但是几毫秒后，UI会重建，因为setState用卡列表更新了变量“ WidgetToBeShownInBody”的新值。添加新项目后，显示一个空的小部件而不是构建器几毫秒，然后经过一毫秒的延迟，向构建器列表发送6个项目。因此，构建器使用6个项目重建了UI，并且“ WidgetToBeShownInBody”已使用新的卡片列表进行了更新。

希望这是清楚而有用的！！如果有人为此找到合适的解决方案，请进行更新。谢谢！

Flutter GridView.builder如何更新

2 个答案: