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

编程问答 2022-08-12

问题描述

Screenshot of the output

我正在使用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;
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dartsliverappbar