如何解决Flutter:搜索栏底部溢出 38 个像素
我正在使用 flappy_search_bar 实现一个 SearchBar
,我想从底部缩小它以适合 appBar
,因为目前我收到一个错误(也见下面的截图):
A RenderFlex overflowed by 38 pixels on the bottom.
我尝试用各种小部件包装它,但它什么也没产生。我怎样才能使 SearchBar
更薄,以便它很好地适合 appBar
?
我的代码:
import 'package:flappy_search_bar/search_bar_style.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flutter/material.dart';
class Post {
final String title;
final String description;
Post(this.title,this.description);
}
Future<List<Post>> search(String search) async {
await Future.delayed(Duration(seconds: 2));
return List.generate(search.length,(int index) {
return Post(
"Title : $search $index","Description :$search $index",);
});
}
@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
resizeToAvoidBottomInset: true,resizeToAvoidBottomPadding: false,backgroundColor: Colors.transparent,appBar: AppBar(
elevation: 0.0,backgroundColor: Colors.lightGreen[800],actions: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 50,right: 5,bottom: 10,top: 4,),child: SearchBar<Post>(
searchBarStyle: SearchBarStyle(
backgroundColor: Colors.white60,borderRadius: BorderRadius.circular(30),onSearch: search,onItemFound: (Post post,int index) {
return ListTile(
title: Text(post.title),subtitle: Text(post.description),);
},IconButton(
icon: Icon(Icons.shopping_cart_outlined),onPressed: null
),IconButton(
icon: Icon(Icons.favorite),],leading: IconButton(
icon: Icon(Icons.logout)
onPressed: null
),body: Center(CircularProgressIndicator())
),);
}
当前应用状态的屏幕截图:
解决方法
从 flappy_search_bar
源文件中可以看出,height
参数是一个 hard-coded value,等于 80。
因此,我们可以修改 AppBar
的高度来解决问题:
class CustomAppBar extends PreferredSize {
CustomAppBar({Key key,Widget title,List<Widget> actions}) : super(
key: key,preferredSize: Size.fromHeight(90),child: AppBar(
title: title,elevation: 0.0,backgroundColor: Colors.lightGreen[800],actions: actions,),);
}
并在我们的代码中使用它:
@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
resizeToAvoidBottomInset: true,resizeToAvoidBottomPadding: false,backgroundColor: Colors.transparent,appBar: CustomAppBar(actions: _appBarActions)
)
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。