我希望列表视图显示在搜索栏下面。它有一个问题,如在示例图片,它重叠。我使用的搜索栏从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(),
],
),
);
}
3条答案
按热度按时间m2xkgtsf1#
由于您使用的是
Stack
小部件,要使ListView
显示在搜索栏的下方,您应该先排列搜索栏,然后再排列ListView,因此,只需颠倒ListView()
和SearchBar
的顺序即可:如果你坚持使用
Stack
的话,你可以考虑使用Column()
小部件。s4n0splo2#
看起来你不需要堆栈,所以只使用列
ffscu2ro3#
在主体小部件内使用列而不是堆栈