[英]How to remove `home: Scaffold` `appBar:` in an `AnimatedList`?
The Following code 1
has a AnimatedList
and produces a blank white page
.下面的
code 1
有一个AnimatedList
并产生一个blank white page
。 I noticed the code 2
works well without errors
and it has MaterialApp
followed by home: Scaffold
appBar:
embedded in it.我注意到
code 2
运行良好without errors
,它有MaterialApp
后跟home: Scaffold
appBar:
嵌入其中。 I don't wanna use any appbar
or anything which bloats the widget.我不想使用任何应用
appbar
或任何使小部件膨胀的东西。 and the widget will be re-used in an another widget, so, I don't wanna have app bar.并且该小部件将在另一个小部件中重新使用,因此,我不想拥有应用栏。 How to remove those things and place
two icon buttons
and the AnimatedList
into a container and column
?如何删除这些东西并将
two icon buttons
和AnimatedList
放入container and column
?
Code 1 - produces white blank代码 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,
),
),
],
));
}
}
Code 2 - Works well代码 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,
),
),
),
);
}
}
You want to remove the appBar like this:您想像这样删除 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,
),
),
],
)),
),
);
}
}
Okay so the error is because you are using Animated List inside Column, Column has unbounded height and Animated List tries to cover all the available height that's why it throws an error and produce a blank screen and to solve this issue use shrinkWrap property of the builder like below:好的,所以错误是因为您在 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"),
),
),
],
)),
)
It happens because your list does not have constraints.发生这种情况是因为您的列表没有限制。
Another possibility, beyond the aforementioned shrinkwrap
, is wrap your AnimatedList
in an Expanded
which would make it size the max as possible.除了上述
shrinkwrap
之外,另一种可能性是将您的AnimatedList
包装在Expanded
中,这将使其大小尽可能大。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.