如何在`AnimatedList`中删除`home：Scaffold``appBar：`？

Question

下面的code 1有一个AnimatedList并产生一个blank white page 。 我注意到code 2运行良好without errors ，它有MaterialApp后跟home: Scaffold appBar:嵌入其中。 我不想使用任何应用appbar或任何使小部件膨胀的东西。 并且该小部件将在另一个小部件中重新使用，因此，我不想拥有应用栏。 如何删除这些东西并将two icon buttons和AnimatedList放入container and column ？

代码 1 - 产生白色空白

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        IconButton(
          icon: const Icon(Icons.add_circle),
          onPressed: _insert,
          tooltip: 'insert a new item',
        ),
        IconButton(
          icon: const Icon(Icons.remove_circle),
          onPressed: _remove,
          tooltip: 'remove the selected item',
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _list.length,
            itemBuilder: _buildItem,
          ),
        ),
      ],
    ));
  }
}

代码 2 - 运行良好

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedList'),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add_circle),
              onPressed: _insert,
              tooltip: 'insert a new item',
            ),
            IconButton(
              icon: const Icon(Icons.remove_circle),
              onPressed: _remove,
              tooltip: 'remove the selected item',
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _list.length,
            itemBuilder: _buildItem,
          ),
        ),
      ),
    );
  }
}

Answer 1

您想像这样删除 appBar：

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
    child: Column(
  children: [
    IconButton(
      icon: const Icon(Icons.add_circle),
      onPressed: _insert,
      tooltip: 'insert a new item',
    ),
    IconButton(
      icon: const Icon(Icons.remove_circle),
      onPressed: _remove,
      tooltip: 'remove the selected item',
    ),
    Padding(
      padding: const EdgeInsets.all(16.0),
      child: AnimatedList(
        key: _listKey,
        initialItemCount: _list.length,
        itemBuilder: _buildItem,
      ),
    ),
  ],
)),
      ),
    );
  }
}

Answer 2

好的，所以错误是因为您在 Column 内使用了 Animated List，Column 具有无限的高度，而 Animated List 试图覆盖所有可用高度，这就是它抛出错误并产生空白屏幕的原因，并且要解决此问题，请使用生成器的 shrinkWrap 属性如下所示：

Scaffold(
      body: Container(
          child: Column(
            children: [
              IconButton(
                icon: const Icon(Icons.add_circle),
                onPressed: (){},color: Colors.blue,
                tooltip: 'insert a new item',
              ),
              IconButton(
                icon: const Icon(Icons.remove_circle),
                onPressed: (){},color: Colors.blue,
                tooltip: 'remove the selected item',
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: AnimatedList(
                 shrinkWrap: true, // this will shrink this list according to available data
                  key: _listKey,
                  initialItemCount: 3,
                  itemBuilder: (context, index, abc) => Text("hello"),
                ),
              ),
            ],
          )),
    )

Answer 3

发生这种情况是因为您的列表没有限制。

除了上述shrinkwrap之外，另一种可能性是将您的AnimatedList包装在Expanded中，这将使其大小尽可能大。