直播app源码，随着页面上下滚动自动吸顶

直播app源码，随着页面上下滚动自动吸顶实现的相关代码

代码示例

NestedScrollView(<br>    controller: _scrollController,<br>    headerSliverBuilder: _headerSliverBuilder,<br>    body: buildSliverBody(context)<br>)<br>///页面滚动头部处理<br>List<Widget> _headerSliverBuilder(BuildContext context, bool innerBoxIsScrolled) {<br>  return <Widget> [<br>    buildSliverAppBar(context)<br>  ];<br>}<br>///导航部分渲染<br>Widget buildSliverAppBar(BuildContext context) {<br>  return SliverAppBar(<br>    //当此值为true时 SliverAppBar 会固定在页面顶部<br>    //当此值为fase时 SliverAppBar 会随着滑动向上滑动<br>    pinned: true,<br>    //滚动是是否拉伸图片<br>    stretch: true,<br>    //展开区域的高度<br>    expandedHeight: 500,<br>    //当snap配置为true时，向下滑动页面，SliverAppBar（以及其中配置的flexibleSpace内容）会立即显示出来，<br>    //反之当snap配置为false时，向下滑动时，只有当ListView的数据滑动到顶部时，SliverAppBar才会下拉显示出来。<br>    snap: false,<br>    //阴影<br>    elevation: 0,<br>    //背景颜色<br>    backgroundColor: headerWhite? Colors.white : Color(0xFFF4F5F7),<br>    //App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness<br>    brightness: Brightness.light,<br>    //在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮<br>    leading: IconButton(<br>        icon: Image.network(backIcon, height: 22, width: 22,),<br>        onPressed: (){<br>          //TODO: 返回事件处理<br>        }<br>    ),<br>//一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用<br>    flexibleSpace: FlexibleSpaceBar(<br>      title: headerWhite ? Text('长津湖', style: TextStyle(<br>          color: Color(0xFF333333),<br>          fontWeight: FontWeight.w700,<br>          fontSize: 17,<br>          fontFamily: 'PingFangSC-Semibold'<br>      ),) : Text(''),<br>      //标题居中<br>      centerTitle: true,<br>      background: buildAppBarBackground(context),<br>    ),<br>  );<br>}

属性

const SliverAppBar({<br>    Key key,<br>    this.leading,         //在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮<br>    this.automaticallyImplyLeading = true,//? 控制是否应该尝试暗示前导小部件为null<br>    this.title,               //当前界面的标题文字<br>    this.actions,          //一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单<br>    this.flexibleSpace,        //一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用<br>    this.bottom,         //一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏<br>    this.elevation,            //阴影<br>    this.forceElevated = false, <br>    this.backgroundColor,       //APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用<br>    this.brightness,   //App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness<br>    this.iconTheme,  //App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme<br>    this.textTheme,    //App bar 上的文字主题。默认值为 ThemeData（）.primaryTextTheme<br>    this.primary = true,  //此应用栏是否显示在屏幕顶部<br>    this.centerTitle,     //标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左<br>    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距<br>    this.expandedHeight,     //展开高度<br>    this.floating = false,       //是否随着滑动隐藏标题<br>    this.pinned = false,  //是否固定在顶部<br>    this.snap = false,   //与floating结合使用<br>  })

flexibleSpace

flexibleSpace: FlexibleSpaceBar(<br>  //是否展示标题<br>  title: headerWhite ? Text('长津湖', style: TextStyle(<br>      color: Color(0xFF333333),<br>      fontWeight: FontWeight.w700,<br>      fontSize: 17,<br>      fontFamily: 'PingFangSC-Semibold'<br>  ),) : Text(''),<br>  //标题居中<br>  centerTitle: true,<br>  //折叠部分背景图片<br>  background: Container(<br>      height: 400,<br>      width: ScreenUtil().screenWidth,<br>      decoration: BoxDecoration(<br>          image: DecorationImage(<br>              image: NetworkImage('https://p0.meituan.net/movie/0e81560dc9910a6a658a82ec7a054ceb5075992.jpg@464w_644h_1e_1c'),<br>              fit: BoxFit.fill<br>          )<br>      ),<br>    ),<br>)

以上就是直播app源码，随着页面上下滚动自动吸顶实现的相关代码，更多内容欢迎关注之后的文章