如何将多个孩子添加到颤动的脚手架主体

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.

【讨论】:

以上是关于如何将多个孩子添加到颤动的脚手架主体的主要内容,如果未能解决你的问题,请参考以下文章

更改 Scaffold.body 值后如何在颤动中隐藏抽屉

在 webview 中颤动水平滑动手势

在颤动中显示全屏加载小部件

用容器包装脚手架以获得渐变背景,如何在颤动中将渐变设置为容器背景?

颤动中的不同导航栏

如何使用底部导航栏从脚手架主体内部推送路线?