Sliverappbar与主体中的内容重叠颤振

如何解决Sliverappbar与主体中的内容重叠颤振

我正在使用Sliver应用程序栏以获得更好的用户界面，我想将标签页保持在必须固定的应用程序栏中。仅需固定选项卡，而带有标题的应用栏仅应拖动到顶部才能展开。当我固定为true时，制表符会覆盖我不需要的正文中的内容。

  return Scaffold(
      body: SafeArea(
        child: DefaultTabController(
          length: 5,child: nestedScrollView(
            headerSliverBuilder:
                (BuildContext context,bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(

                  backgroundColor: Colors.white,floating: false,flexibleSpace: FlexibleSpaceBar(
                    title: Text(
                      "Home Page",style: TextStyle(
                        color: Colors.teal,),actions: [
                    IconButton(
                      icon: Icon(
                        Icons.message,color: Colors.grey[700],onpressed: () {},SizedBox(width: 5)

                  ],SliverPersistentHeader(
                  pinned: true,delegate: _SliverAppBarDelegate(
                    TabBar(
                      labelColor: Colors.teal,unselectedLabelColor: Colors.grey[600],tabs: [
                        Tab(icon: Icon(Icons.home)),Tab(icon: Icon(Icons.people_outline)),Tab(icon: Icon(Icons.account_balance)),Tab(icon: Icon(Icons.notifications_active)),Tab(icon: Icon(Icons.menu)),],];
            },body: ListView(
              children: [
                Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10.0),child: Row(
                        children: [
                          SizedBox(width: 10),Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 6.0),child: CircleAvatar(
                              radius: width(context) * 0.08,Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 4.0),child: Container(
                              width: width(context) * 0.74,height: width(context) * 0.15,decoration: Boxdecoration(
                                  border: Border.all(color: Colors.grey[800]),borderRadius: BorderRadius.circular(100)),child: Column([![enter image description here][1]][1]
                                mainAxisAlignment: MainAxisAlignment.center,children: [
                                  Wrap(
                                    children: [
                                      Text('To ask a question \n type here...',style: TextStyle(fontSize: 22),Row(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),child: Container(
                            height: height(context)*0.07,width: width(context)*0.70,decoration: Boxdecoration(
                                border: Border.all(color: Colors.grey[800]),borderRadius: BorderRadius.circular(10)),Container(
                          height: height(context)*0.07,width: width(context)*0.25,decoration: Boxdecoration(
                              border: Border.all(color: Colors.grey[800]),Padding(
                      padding: const EdgeInsets.only(top: 8.0,left: 8,right: 8),child: Divider(
                        color: Colors.grey[600],child: Card(
                        child: Container(
                          height: 200,);
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minextent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context,double shrinkOffset,bool overlapsContent) {
    return new Container(
      child: _tabBar,);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

解决方法

您需要在“ _SliverAppBarDelegate”中更改“ build”方法，如下所示。

请尝试在“容器”中提供背景色。

return new Container(
      color: Colors.white,// Here
      child: _tabBar,);

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context,double shrinkOffset,bool overlapsContent) {
    return new Container(
      color: Colors.white,child: _tabBar,);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}