如何将多个孩子添加到颤动的脚手架主体
Posted
技术标签:
【中文标题】如何将多个孩子添加到颤动的脚手架主体【英文标题】:How to add multiple Children to flutter scaffold body 【发布时间】:2020-08-08 22:54:52 【问题描述】:我正在尝试将多个child
写入flutter
脚手架body:
标记。
我是 Flutter 的新手,我不知道如何在一个 body 标签内处理多个孩子。 他是我尝试过的。
return new Scaffold(
appBar: AppBar(
leading: new Icon(Icons.live_tv),
title: const Text('SnapNews'),
backgroundColor: Colors.red,
actions: <Widget>[
IconButton(
icon: Icon(Icons.help),
onPressed: ()
Navigator.push(
context, MaterialPageRoute(builder: (_) => Help()));
,
),
],
),
body: new ListView.builder(
itemCount: 10,
itemBuilder: (context, index)
return new GestureDetector(
onTap: ()
print("tapped");
,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Container(
color: Colors.grey,
height: 100.0,
),
),
);
,
),
floatingActionButton: FloatingActionButton.extended(
elevation: 4.0,
icon: const Icon(Icons.camera_enhance),
label: const Text('Snap'),
backgroundColor: Colors.red,
onPressed: ()
Navigator.push(
context,
MaterialPageRoute(builder: (_) => CameraScreen()),
);
,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(null),
onPressed: () ,
),
IconButton(
icon: Icon(null),
onPressed: () ,
)
],
),
),
);
这会产生如下的图形用户界面:
但我想在这个ListView
的顶部添加一个Search Bar
如何将另一个孩子/孩子添加到 body:
标记
谢谢。
【问题讨论】:
【参考方案1】:您可以将 ListView.builder 放在 ListView 中。
编辑:要使 SearchBar() 不可滚动,请将其放在 Column 而不是 ListView 中。
body: Column(
children: [
SearchBar(),
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index)
return new GestureDetector(
onTap: ()
print("tapped");
,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Container(
color: Colors.grey,
height: 100.0,
),
),
);
,
),
),
],
),
【讨论】:
当我这样做时,我什么都看不到。身体部分是空的,只是纯白色。 好吧,这工作,我怎样才能使搜索栏静态?当我滚动时它也会下降【参考方案2】:您需要给body
一个Column
小部件作为孩子,然后您可以使用任意数量的孩子。
例子
Scaffold(
body: Column(
children: <Widget>[
//all the children widgets that you need
],
),
),
【讨论】:
这不起作用。只给出空白甚至不显示我之前的内容【参考方案3】:推荐的方法是将搜索栏放在AppBar
小部件内title
内。现在您正在使用这个title: const Text('SnapNews'),
,所以您可以在Text('SnapNes')
小部件和搜索栏之间切换,比如说TextField
小部件。在AppBar的actions
中放一个search button
和一个cancel button
,就可以得到想要的效果。例如:
bool isSearching = false;
appBar: AppBar(
title: !isSearching
? Text('SnapNews')
: TextField(
onChanged: (value)
// search logic
,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
icon: Icon(
Icons.search,
color: Colors.white,
),
hintText: "Search News Here",
hintStyle: TextStyle(color: Colors.white)),
),
actions: <Widget>[
isSearching
? IconButton(
icon: Icon(Icons.cancel),
onPressed: ()
setState(()
this.isSearching = false;
);
,
)
: IconButton(
icon: Icon(Icons.search),
onPressed: ()
setState(()
this.isSearching = true;
);
,
)
],
),
检查以下link.
【讨论】:
以上是关于如何将多个孩子添加到颤动的脚手架主体的主要内容,如果未能解决你的问题,请参考以下文章