flutter 如何使列表视图位于搜索栏下方?

qvsjd97n  于 2022-12-27  发布在  Flutter
关注(0)|答案(3)|浏览(175)

我希望列表视图显示在搜索栏下面。它有一个问题,如在示例图片,它重叠。我使用的搜索栏从pubdev。
这是一个示例图像

这是一个代码

@override
 Widget build(BuildContext context) {
return Scaffold(
  appBar: CustomAppBar(),
  resizeToAvoidBottomInset: false,
  body: Stack(
    fit: StackFit.expand,
    children: [
      Column(
        children: <Widget>[
          Expanded(
              child: items.isNotEmpty != 0
                  ? ListView.builder(
                      itemCount: items.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: Container(
                              child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              ListTile(
                                  title: Text(
                                    items[index].name!,
                                    style: TextStyle(
                                        fontWeight: FontWeight.normal,
                                        fontSize: 18.0,
                                        fontFamily: 'supermarket'),
                                  ),                                 
                            ],
                          )),
                        );
                      },
                    )
                  : Center(
                      child: Text('Search'),
                    )),
        ],
      ),
      buildFloatingSearchBar(),
    ],
  ),
);
}
m2xkgtsf

m2xkgtsf1#

由于您使用的是Stack小部件,要使ListView显示在搜索栏的下方,您应该先排列搜索栏,然后再排列ListView,因此,只需颠倒ListView()SearchBar的顺序即可:

Stack(
        fit: StackFit.expand,
        children: [
          Column(
            children: <Widget>[
              // --> Call the SearchBar widget here
              Flexible(child: buildFloatingSearchBar()),
              Expanded(
                  child: items.isNotEmpty != 0
                      ? ListView.builder(
                          itemCount: items.length,
                          itemBuilder: (context, index) {
                            return Card(
                                child: Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  ListTile(title: items[index]),
                                ],
                              ),
                            ));
                          },
                        )
                      : Center(
                          child: Text('Search'),
                        )),
            ],
          ),
        ],
      ),

如果你坚持使用Stack的话,你可以考虑使用Column()小部件。

s4n0splo

s4n0splo2#

看起来你不需要堆栈,所以只使用列

return Scaffold(
      appBar: CustomAppBar(),
      resizeToAvoidBottomInset: false,
      body: Column(
        children: <Widget>[
          // search bar
          buildFloatingSearchBar(),
          Expanded(
            child: items.isNotEmpty != 0
                ? ListView.builder(
                    itemCount: items.length,
                    itemBuilder: (context, index) {
                      return Card(
                        child: Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              ListTile(
                                title: Text(
                                  items[index].name!,
                                  style: TextStyle(
                                      fontWeight: FontWeight.normal,
                                      fontSize: 18.0,
                                      fontFamily: 'supermarket'),
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : Center(
                    child: Text('Search'),
                  ),
          ),
        ],
      ),
    );
ffscu2ro

ffscu2ro3#

在主体小部件内使用列而不是堆栈

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AppBar')),
      resizeToAvoidBottomInset: false,
      body: Column(
        children: <Widget>[
          Container(
            height: 80,
            width: 100.w,
            color: Colors.green,
            child: Text('Replace With Your Searchbar '),
          ),
          Expanded(
              child: items.isNotEmpty != 0
                  ? ListView.builder(
                      itemCount: items.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: Container(
                              child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              ListTile(
                                title: Text(
                                  items[index].toString(),
                                  style: TextStyle(fontWeight: FontWeight.normal, fontSize: 18.0, fontFamily: 'supermarket'),
                                ),
                              )
                            ],
                          )),
                        );
                      },
                    )
                  : Center(
                      child: Text('Search'),
                    )),
        ],
      ),
    );
  }

相关问题