Flutter 如何在搜索栏下方制作listview？

Question

我希望列表视图显示在搜索栏下方。 它有一个问题，如示例图片所示，它重叠。 我使用 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(),
    ],
  ),
);
}

Answer 1

由于你在Stack widget中，为了让ListView显示在SearchBar下方，你应该先排列searchBar，然后排列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()小部件。

Answer 2

看起来你不需要 Stack 所以只需使用 Column

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'),
                  ),
          ),
        ],
      ),
    );

Answer 3

在 Body Widget 中使用 Column 而不是 Stack

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('AppBar')), resizeToAvoidBottomInset: false, body: Column( children: [ 容器( 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) { 返回卡( child: Container( child: Column( crossAxisAlignment.CrossAxisAlignment,start: children: [ ListTile( title.Text( items[index],toString(): style: TextStyle(fontWeight.FontWeight,normal: fontSize.18,0: fontFamily , '超市'), ), ) ], )); ), }: ): Center( child, Text('Search'), )), ], ); ); }