Блог

Следующее code 1 имеет a AnimatedList и производит a 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: lt;Widgetgt;[  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,  ),  ),  ),  );  } }  

Итак, ошибка в том, что вы используете анимированный список внутри столбца, столбец имеет неограниченную высоту, а анимированный список пытается покрыть всю доступную высоту, поэтому он выдает ошибку и выдает пустой экран, и для решения этой проблемы используйте свойство 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) =gt; Text("hello"),  ),  ),  ],  )),  )  

Это происходит потому, что в вашем списке нет ограничений.

Другая возможность, помимо вышеупомянутого shrinkwrap , заключается в том, чтобы завернуть вас AnimatedList в Expanded то, что сделает его максимально возможным.