[英]Flutter How to make listview below search bar?
I want the listview to show below the search bar.我希望列表视图显示在搜索栏下方。 It has a problem as in the example picture, it overlaps.
它有一个问题,如示例图片所示,它重叠。 I use the search bar from pubdev.
我使用 pubdev 的搜索栏。
This is a example image这是一个示例图像
This is a Code这是一个代码
@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(),
],
),
);
}
Since you're in a Stack
widget, to make the ListView
show below the SearchBar, you should first arrange the searchBar and then arrange the ListView.由于你在
Stack
widget中,为了让ListView
显示在SearchBar下方,你应该先排列searchBar,然后排列ListView。 So, simply reverse the order of the ListView()
and SearchBar
:因此,只需颠倒
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'),
)),
],
),
],
),
This is if you insist on using a Stack
.这是如果你坚持使用
Stack
。 You might want to consider using a Column()
widget instead.您可能需要考虑改用
Column()
小部件。
Looks like you don't need Stack so just use Column看起来你不需要 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'),
),
),
],
),
);
use Column instead of Stack inside Body Widget在 Body Widget 中使用 Column 而不是 Stack
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('AppBar')), resizeToAvoidBottomInset: false, body: Column( children: [ 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: [ ListTile( title. Text( items[index],toString(): style: TextStyle(fontWeight. FontWeight,normal: fontSize. 18,0: fontFamily, 'supermarket'), ), ) ], )); ), }: ): Center( child, Text('Search'), )), ], ); ); @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'), )), ], ); ); }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.