Flutter : how Allow content to overlap SliverAppBar?(Flutter:如何允许内容重叠 SliverAppBar?)
本文介绍了Flutter:如何允许内容重叠 SliverAppBar?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在 android 中，我们使用 app:behavior_overlapTop="64dp" 来实现这一点
我希望在颤动中与上面的 GIF 相同的重叠内容
我的代码
类 DetailsPage 扩展 StatefulWidget {@覆盖_DetailsPage createState() =>_DetailsPage();}类 _DetailsPage 扩展了 State<DetailsPage>{@覆盖无效初始化状态(){super.initState();SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp,DeviceOrientation.portraitDown,]);_scrollController = 滚动控制器()；_scrollController.addListener(_scrollListener);}滚动控制器_滚动控制器；布尔最后状态=真；_scrollListener() {if (isShrink != lastStatus) {设置状态((){lastStatus = isShrink;});}}布尔获取 isShrink {return _scrollController.hasClients &&_scrollController.offset >(250 - kToolbarHeight);}@覆盖无效处置(){_scrollController.removeListener(_scrollListener);super.dispose();}@覆盖小部件构建(BuildContext 上下文){返回脚手架(//backgroundColor: Colors.transparent,正文:嵌套滚动视图(控制器:_scrollController，headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {返回<小部件>[SliverAppBar(扩展高度:250.0，浮动:假，亮度:Brightness.light，固定:真的，//海拔:0.0,//backgroundColor: AppColors.colorCreateTripOrange,背景颜色:颜色.白色，动作:<小部件>[手势检测器(点按:(){Navigator.of(context).pop();},孩子:填充(填充:const EdgeInsets.only(右:20.0)，孩子:Image.asset('资产/图像/close.png',宽度:25.0，高度:25.0，),),)],领先:填充(填充:const EdgeInsets.only(左:20.0，上:0)，孩子:图标按钮(图标大小:25，图标:Image.asset('资产/图像/back.png',宽度:25，身高:25，),颜色:颜色.黑色，按下:(){Navigator.of(context).pop();},)),弹性空间:弹性空间条(中心标题:假，collapseMode: CollapseMode.parallax,标题:文本(isShrink?罗马":"，样式:文本样式(颜色:isShrink ?颜色.黑色:颜色.白色，fontFamily: 'bin_bold',字体大小:18.0，)),背景:Image.network("https://media.istockphoto.com/photos/great-colosseum-rome-italy-picture-id692334500",适合:BoxFit.cover，)),),];},身体:容器(//padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 40.0),装饰:盒子装饰(颜色:AppColors.colorWhite，边界半径:边界半径.all(半径.圆形(20))，),孩子:列(孩子们:<小部件>[展开(孩子:容器(填充:const EdgeInsets.only(左:20.0，右:20.0，上:40.0)，装饰:盒子装饰(颜色:AppColors.colorWhite，边界半径:边界半径.all(半径.圆形(20))，),孩子:列表视图(孩子们:<小部件>[柱子(crossAxisAlignment:CrossAxisAlignment.start，孩子们:<小部件>[填充(填充:EdgeInsets.symmetric(水平:15.0)，孩子:文本(罗马"，样式:文本样式(颜色:颜色.黑色，fontFamily: 'bin_bold',字体大小:25.0)，),),填充(填充:EdgeInsets.only(顶部:20，左侧:15，右侧:15)，孩子:行(孩子们:<小部件>[图片.asset('assets/images/calender.png',宽度:25.0，高度:25.0，),填充(填充:const EdgeInsets.only(左:10.0)，孩子:文本(2020年3月6-12日"，样式:文本样式(fontFamily: 'bin',字体大小:18，颜色:AppColors.colorActivityGray),),)],),),容器(宽度:双无限，边距:常量 EdgeInsets.only(上:20.0，左:20.0，右:30.0)，//padding: const EdgeInsets.only(left: 20.0, right: 20.0),装饰:盒子装饰(颜色:AppColors.colorTripsGray，边界半径:边界半径.all(半径.圆形(20))，边框:Border.all(颜色:AppColors.colorDivider)，),孩子:列(crossAxisAlignment:CrossAxisAlignment.start，孩子们:<小部件>[填充(填充:const EdgeInsets.only(最高:15.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(常量.区域，样式:文本样式(颜色:AppColors.colorLightBorderOrange，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(最高:10.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(常量.firstName,样式:文本样式(颜色:AppColors.colorCreateGreyTrans，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(上:10.0，下:0.0，左:0.0，右:00.0)，孩子:分频器()，),填充(填充:const EdgeInsets.only(最高:10.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(常量.活动，样式:文本样式(颜色:AppColors.colorLightBorderOrange，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(最高:10.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(美食与酒吧，必看景点"，样式:文本样式(颜色:AppColors.colorCreateGreyTrans，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(上:10.0，下:0.0，左:0.0，右:00.0)，孩子:分频器()，),填充(填充:const EdgeInsets.only(最高:10.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(常量.noOfTravellers,样式:文本样式(颜色:AppColors.colorLightBorderOrange，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(最高:10.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(2 名成人，1 名儿童"，样式:文本样式(颜色:AppColors.colorCreateGreyTrans，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(上:10.0，下:0.0，左:0.0，右:00.0)，孩子:分频器()，),填充(填充:const EdgeInsets.only(最高:10.0，底部:0.0，左:20.0，右:20.0)，孩子:文本(常量.email,样式:文本样式(颜色:AppColors.colorLightBorderOrange，fontFamily: 'din',字体大小:20)，),),填充(填充:const EdgeInsets.only(最高:10.0，底部:10.0，左:20.0，右:20.0)，孩子:文本("kim.john12@gmail.com",样式:文本样式(颜色:AppColors.colorCreateGreyTrans，fontFamily: 'din',字体大小:20)，),),],),),],)],),),),容器(宽度:双无限，边距:const EdgeInsets.only(顶部:20.0)，填充:常量 EdgeInsets.all(10.0)，装饰:盒子装饰(颜色:AppColors.colorWhite，边界半径:边界半径.all(半径.圆形(40))，边框:Border.all(颜色:AppColors.colorDivider，宽度:2.0)，),孩子:中心(孩子:包裹(孩子们:<小部件>[材质按钮(填充: const EdgeInsets.symmetric(水平:40，垂直:20)，文本颜色:颜色.黑色，颜色:AppColors.colorWhite，孩子:文本(常量.messageTripDesigner,样式:文本样式(fontFamily: 'din_bold',fontSize: 常量.regionFontSize),),形状:圆角矩形边框(边界半径:边界半径.圆形(30.0)，边:边界边(颜色:AppColors.colorLightBorderOrange，宽度:2)，),按下:(){Navigator.of(context).pop();},)],),),)],),),),);}}类 MySliverAppBar 扩展 SliverPersistentHeaderDelegate {最终双expandHeight；MySliverAppBar({@required this.expandedHeight});@覆盖小部件构建(BuildContext context, double shrinkOffset, bool overlaysContent) {返回堆栈(适合:StackFit.expand，溢出:溢出.可见，孩子们: [图像.网络("https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",适合:BoxFit.cover，),中心(孩子:不透明度(不透明度:shrinkOffset/expandHeight，孩子:文本("MySliverAppBar",样式:文本样式(颜色:颜色.白色，字体重量:字体重量.w700，字体大小:23，),),),),],);}@覆盖双重获取最大范围=>扩展高度；@覆盖双重获取 minExtent =>k工具栏高度；@覆盖bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) =>真的;}以下是我目前尝试过的一些帖子
步骤
- 将
DraggableScrollableSheet和AppBar堆叠在主体内脚手架 - 使用
DraggableScrollableNotification更新标题高度和AppBar阴影.
给你
import 'package:flutter/material.dart';无效的主要(){runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));}类 HomePage 扩展 StatefulWidget {@覆盖状态<StatefulWidget>创建状态()=>_HomePageState();}class _HomePageState 扩展了 State与 SingleTickerProviderStateMixin {最终值通知器<double>headerNegativeOffset = ValueNotifier<double>(0);final ValueNotifier<bool>appbarShadow = ValueNotifier (false);最终双 maxHeaderHeight = 250.0;最终双 minHeaderHeight = 56.0;最终双 bodyContentRatioMin = .8;最终双 bodyContentRatioMax = 1.0;///必须在正文内容比率的最小值和最大值之间.最终双 bodyContentRatioParallax = .9;@覆盖无效处置(){headerNegativeOffset.dispose();appbarShadow.dispose();super.dispose();}@覆盖小部件构建(BuildContext 上下文){返回脚手架(//仅用于状态栏颜色appBar: PreferredSize(首选尺寸:Size.fromHeight(0.0)，孩子:AppBar(背景颜色:颜色.粉红色，海拔:0.0，),),正文:堆栈(孩子们:<小部件>[堆栈(儿童:[容器(孩子:ValueListenableBuilder<double>(valueListenable: headerNegativeOffset,builder: (context, offset, child) {返回变换.翻译(偏移量:偏移量(0，偏移量 * -1)，孩子:大小框(高度:maxHeaderHeight，孩子:容器(颜色:颜色.粉红色，),),);})),NotificationListener<DraggableScrollableNotification>(onNotification:(通知){if (notification.extent == bodyContentRatioMin) {appbarShadow.value = false;headerNegativeOffset.value = 0;} else if (notification.extent == bodyContentRatioMax) {appbarShadow.value = true;headerNegativeOffset.value =maxHeaderHeight - minHeaderHeight;} 别的 {双 newValue = (maxHeaderHeight - minHeaderHeight) -((maxHeaderHeight - minHeaderHeight) *((bodyContentRatioParallax - (notification.extent))/(bodyContentRatioMax -bodyContentRatioParallax)));appbarShadow.value = false;if (newValue >= maxHeaderHeight - minHeaderHeight) {appbarShadow.value = true;newValue = maxHeaderHeight - minHeaderHeight;} else if (newValue < 0) {appbarShadow.value = false;新值 = 0；}headerNegativeOffset.value = newValue;}返回真；},孩子:堆栈(孩子们:<小部件>[DraggableScrollableSheet(initialChildSize: bodyContentRatioMin,minChildSize: bodyContentRatioMin,maxChildSize: bodyContentRatioMax,构建器:(BuildContext上下文，滚动控制器滚动控制器){返回堆栈(孩子们:<小部件>[容器(对齐:AlignmentDirectional.center，填充:EdgeInsets.only(左:16.0，右:16.0，上:16.0)，孩子:材料(类型:MaterialType.canvas，颜色:颜色.白色，海拔:2.0，边界半径:边界半径.only(左上角:半径.圆形(24.0)，右上:半径.圆形(24.0)，),孩子:ListView.builder(控制器:滚动控制器，项目数:200，itemBuilder: (BuildContext context, int index) {return ListTile(title: Text('Item $index'));},),),),],);},),],),)]),定位(左:0.0，右:0.0，顶部:0.0，孩子:ValueListenableBuilder<bool>(valueListenable: appbarShadow,构建器:(上下文，值，子){///appbar 的默认高度是 56.0.你也可以///如果需要，可以使用具有自定义高度的自定义小部件.返回应用栏(背景颜色:颜色.粉红色，标题:文本(笔记")，海拔:价值?2.0:0.0，);}),),],),抽屉:抽屉()，);}} 查看现场演示这里.
In android we are using
app:behavior_overlapTop="64dp"to achieve thisI want overlap content same like above GIF in flutter
My code
class DetailsPage extends StatefulWidget { @override _DetailsPage createState() => _DetailsPage(); } class _DetailsPage extends State<DetailsPage> { @override void initState() { super.initState(); SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]); _scrollController = ScrollController(); _scrollController.addListener(_scrollListener); } ScrollController _scrollController; bool lastStatus = true; _scrollListener() { if (isShrink != lastStatus) { setState(() { lastStatus = isShrink; }); } } bool get isShrink { return _scrollController.hasClients && _scrollController.offset > (250 - kToolbarHeight); } @override void dispose() { _scrollController.removeListener(_scrollListener); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( // backgroundColor: Colors.transparent, body: NestedScrollView( controller: _scrollController, headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverAppBar( expandedHeight: 250.0, floating: false, brightness: Brightness.light, pinned: true, // elevation: 0.0, // backgroundColor: AppColors.colorCreateTripOrange, backgroundColor: Colors.white, actions: <Widget>[ GestureDetector( onTap: () { Navigator.of(context).pop(); }, child: Padding( padding: const EdgeInsets.only(right: 20.0), child: Image.asset( 'assets/images/close.png', width: 25.0, height: 25.0, ), ), ) ], leading: Padding( padding: const EdgeInsets.only(left: 20.0, top: 0), child: IconButton( iconSize: 25, icon: Image.asset( 'assets/images/back.png', width: 25, height: 25, ), color: Colors.black, onPressed: () { Navigator.of(context).pop(); }, )), flexibleSpace: FlexibleSpaceBar( centerTitle: false, collapseMode: CollapseMode.parallax, title: Text(isShrink ? "Rome" : "", style: TextStyle( color: isShrink ? Colors.black : Colors.white, fontFamily: 'bin_bold', fontSize: 18.0, )), background: Image.network( "https://media.istockphoto.com/photos/great-colosseum-rome-italy-picture-id692334500", fit: BoxFit.cover, )), ), ]; }, body: Container( // padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 40.0), decoration: BoxDecoration( color: AppColors.colorWhite, borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Column( children: <Widget>[ Expanded( child: Container( padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 40.0), decoration: BoxDecoration( color: AppColors.colorWhite, borderRadius: BorderRadius.all(Radius.circular(20)), ), child: ListView( children: <Widget>[ Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: EdgeInsets.symmetric(horizontal: 15.0), child: Text( "Rome", style: TextStyle( color: Colors.black, fontFamily: 'bin_bold', fontSize: 25.0), ), ), Padding( padding: EdgeInsets.only(top: 20, left: 15, right: 15), child: Row( children: <Widget>[ Image.asset( 'assets/images/calender.png', width: 25.0, height: 25.0, ), Padding( padding: const EdgeInsets.only(left: 10.0), child: Text( "March 6-12, 2020", style: TextStyle( fontFamily: 'bin', fontSize: 18, color: AppColors.colorActivityGray), ), ) ], ), ), Container( width: double.infinity, margin: const EdgeInsets.only( top: 20.0, left: 20.0, right: 30.0), // padding: const EdgeInsets.only(left: 20.0, right: 20.0), decoration: BoxDecoration( color: AppColors.colorTripsGray, borderRadius: BorderRadius.all(Radius.circular(20)), border: Border.all(color: AppColors.colorDivider), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.only( top: 15.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( Constants.region, style: TextStyle( color: AppColors.colorLightBorderOrange, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( Constants.firstName, style: TextStyle( color: AppColors.colorCreateGreyTrans, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 0.0, right: 00.0), child: Divider(), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( Constants.activities, style: TextStyle( color: AppColors.colorLightBorderOrange, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( "Food & Bar, Must See Attractions", style: TextStyle( color: AppColors.colorCreateGreyTrans, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 0.0, right: 00.0), child: Divider(), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( Constants.noOfTravellers, style: TextStyle( color: AppColors.colorLightBorderOrange, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( "2 Adults, 1 kid", style: TextStyle( color: AppColors.colorCreateGreyTrans, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 0.0, right: 00.0), child: Divider(), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 0.0, left: 20.0, right: 20.0), child: Text( Constants.email, style: TextStyle( color: AppColors.colorLightBorderOrange, fontFamily: 'din', fontSize: 20), ), ), Padding( padding: const EdgeInsets.only( top: 10.0, bottom: 10.0, left: 20.0, right: 20.0), child: Text( "kim.john12@gmail.com", style: TextStyle( color: AppColors.colorCreateGreyTrans, fontFamily: 'din', fontSize: 20), ), ), ], ), ), ], ) ], ), ), ), Container( width: double.infinity, margin: const EdgeInsets.only(top: 20.0), padding: const EdgeInsets.all(10.0), decoration: BoxDecoration( color: AppColors.colorWhite, borderRadius: BorderRadius.all(Radius.circular(40)), border: Border.all(color: AppColors.colorDivider, width: 2.0), ), child: Center( child: Wrap( children: <Widget>[ MaterialButton( padding: const EdgeInsets.symmetric( horizontal: 40, vertical: 20), textColor: Colors.black, color: AppColors.colorWhite, child: Text( Constants.messageTripDesigner, style: TextStyle( fontFamily: 'din_bold', fontSize: Constants.regionFontSize), ), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30.0), side: BorderSide( color: AppColors.colorLightBorderOrange, width: 2), ), onPressed: () { Navigator.of(context).pop(); }, ) ], ), ), ) ], ), ), ), ); } } class MySliverAppBar extends SliverPersistentHeaderDelegate { final double expandedHeight; MySliverAppBar({@required this.expandedHeight}); @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return Stack( fit: StackFit.expand, overflow: Overflow.visible, children: [ Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", fit: BoxFit.cover, ), Center( child: Opacity( opacity: shrinkOffset / expandedHeight, child: Text( "MySliverAppBar", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w700, fontSize: 23, ), ), ), ), ], ); } @override double get maxExtent => expandedHeight; @override double get minExtent => kToolbarHeight; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; }Below are some post that i have tried so far
- https://github.com/flutter/flutter/issues/404
- Allow GridView to overlap SliverAppBar
- How to overlap SliverList on a SliverAppBar
- https://flutter.dev/docs/cookbook/lists/floating-app-bar
- https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
解决方案You can make the App bar scrolling with overlapping content like flexible space by using any of the following combo depending upon your use case.
ListViewwith Scroll notificationSliverListwith Scroll notificationDraggableScrollableSheetwith DraggableScrollableNotification
Well, Here I am going with the easiest one,
DraggableScrollableSheetwhich allows to scroll and drag simultaneously to create the desired effect.Steps
- Stack the
DraggableScrollableSheetand theAppBarinside the body of the Scaffold - Use
DraggableScrollableNotificationto update the header height andAppBarshadow.
Here you go
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage())); } class HomePage extends StatefulWidget { @override State<StatefulWidget> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin { final ValueNotifier<double> headerNegativeOffset = ValueNotifier<double>(0); final ValueNotifier<bool> appbarShadow = ValueNotifier<bool>(false); final double maxHeaderHeight = 250.0; final double minHeaderHeight = 56.0; final double bodyContentRatioMin = .8; final double bodyContentRatioMax = 1.0; ///must be between min and max values of body content ratio. final double bodyContentRatioParallax = .9; @override void dispose() { headerNegativeOffset.dispose(); appbarShadow.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( //just for status bar color appBar: PreferredSize( preferredSize: Size.fromHeight(0.0), child: AppBar( backgroundColor: Colors.pink, elevation: 0.0, ), ), body: Stack( children: <Widget>[ Stack(children: [ Container( child: ValueListenableBuilder<double>( valueListenable: headerNegativeOffset, builder: (context, offset, child) { return Transform.translate( offset: Offset(0, offset * -1), child: SizedBox( height: maxHeaderHeight, child: Container( color: Colors.pink, ), ), ); })), NotificationListener<DraggableScrollableNotification>( onNotification: (notification) { if (notification.extent == bodyContentRatioMin) { appbarShadow.value = false; headerNegativeOffset.value = 0; } else if (notification.extent == bodyContentRatioMax) { appbarShadow.value = true; headerNegativeOffset.value = maxHeaderHeight - minHeaderHeight; } else { double newValue = (maxHeaderHeight - minHeaderHeight) - ((maxHeaderHeight - minHeaderHeight) * ((bodyContentRatioParallax - (notification.extent)) / (bodyContentRatioMax - bodyContentRatioParallax))); appbarShadow.value = false; if (newValue >= maxHeaderHeight - minHeaderHeight) { appbarShadow.value = true; newValue = maxHeaderHeight - minHeaderHeight; } else if (newValue < 0) { appbarShadow.value = false; newValue = 0; } headerNegativeOffset.value = newValue; } return true; }, child: Stack( children: <Widget>[ DraggableScrollableSheet( initialChildSize: bodyContentRatioMin, minChildSize: bodyContentRatioMin, maxChildSize: bodyContentRatioMax, builder: (BuildContext context, ScrollController scrollController) { return Stack( children: <Widget>[ Container( alignment: AlignmentDirectional.center, padding: EdgeInsets.only( left: 16.0, right: 16.0, top: 16.0), child: Material( type: MaterialType.canvas, color: Colors.white, elevation: 2.0, borderRadius: BorderRadius.only( topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0), ), child: ListView.builder( controller: scrollController, itemCount: 200, itemBuilder: (BuildContext context, int index) { return ListTile(title: Text('Item $index')); }, ), ), ), ], ); }, ), ], ), ) ]), Positioned( left: 0.0, right: 0.0, top: 0.0, child: ValueListenableBuilder<bool>( valueListenable: appbarShadow, builder: (context, value, child) { ///default height of appbar is 56.0. You can also ///use a custom widget with custom height if you want. return AppBar( backgroundColor: Colors.pink, title: Text("Notes"), elevation: value ? 2.0 : 0.0, ); }), ), ], ), drawer: Drawer(), ); } }See the live demo here.
这篇关于Flutter:如何允许内容重叠 SliverAppBar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
- 将
沃梦达教程
本文标题为：Flutter:如何允许内容重叠 SliverAppBar?
基础教程推荐
猜你喜欢
- 如何让对象对 Cocos2D 中的触摸做出反应? 2022-01-01
- 如何在 iPhone 上显示来自 API 的 HTML 文本? 2022-01-01
- UIWebView 委托方法 shouldStartLoadWithRequest:在 WKWebView 中等效? 2022-01-01
- 如何在没有IB的情况下将2个按钮添加到右侧的UINavigationbar? 2022-01-01
- 如何在 UIImageView 中异步加载图像? 2022-01-01
- Kivy Buildozer 无法构建 apk，命令失败:./distribute.sh -m “kivy"d 2022-01-01
- android 应用程序已发布，但在 google play 中找不到 2022-01-01
- Android:对话框关闭而不调用关闭 2022-01-01
- 当从同一个组件调用时，两个 IBAction 触发的顺序是什么? 2022-01-01
- 在 gmail 中为 ios 应用程序检索朋友的朋友 2022-01-01
