如何在`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中，這將使其大小盡可能大。