flutter AppBar和SliverAppBar,以及Scaffold.appBar
AppBar
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter gesture', home: _home(), )); } class _home extends StatefulWidget { @override State<StatefulWidget> createState() { return _homeState(); } } class _homeState extends State<_home> { final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar')); void openPage(BuildContext context) { Navigator.push(context, MaterialPageRoute( builder: (BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Next page'), ), body: const Center( child: Text( 'This is the next page', style: TextStyle(fontSize: 24), ), ), ); }, )); } // ... Widget build(BuildContext context) { return Scaffold( key: scaffoldKey, appBar: AppBar( title: const Text('AppBar Demo'), actions: <Widget>[ IconButton( icon: const Icon(Icons.add_alert), tooltip: 'Show Snackbar', onPressed: () { scaffoldKey.currentState.showSnackBar(snackBar); }, ), IconButton( icon: const Icon(Icons.navigate_next), tooltip: 'Next page', onPressed: () { openPage(context); }, ), ], ), body: const Center( child: Text( 'This is the home page', style: TextStyle(fontSize: 24), ), ), ); } }
SliverAppBar:参照https://blog.csdn.net/u011272795/article/details/82740389
import 'package:flutter/material.dart';
void main() {
runApp( MaterialApp(
title: 'Flutter gesture',
home: DiscoverListPage(),
));
}
class DiscoverListPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => DiscoverListState();
}
class DiscoverListState extends State<DiscoverListPage>
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: _sliverBuilder,
body: Center(
child: ListView.builder(
itemBuilder: _itemBuilder,
itemCount: 150,
),
)),
);
}
List<Widget> _sliverBuilder(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
//标题居中
centerTitle: true,
//展开高度200
expandedHeight: 150.0,
//不随着滑动隐藏标题
floating: false,
//固定在顶部
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text('我是一个FlexibleSpaceBar'),
background: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531798262708&di=53d278a8427f482c5b836fa0e057f4ea&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg",
fit: BoxFit.cover,
),
),
),
SliverPersistentHeader(
//不随着滑动隐藏标题
floating: false,
pinned: true,//固定在顶部
delegate: _SliverAppBarDelegate(
TabBar(
indicatorColor:Colors.blue[300],
labelColor: Colors.red,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(icon: Icon(Icons.cake), text: '左侧'),
Tab(icon: Icon(Icons.golf_course), text: '右侧'),
],
controller: TabController(length: 2, vsync: this),
)))
];
}
Widget _itemBuilder(BuildContext context, int index) {
return ListTile(
leading: Icon(Icons.android),
title: Text('无与伦比的标题+$index'),
);
}
}
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 Container(
color: Colors.lightGreen[300],
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
Scaffold.appBar
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter gesture', // home: TutorialHome(), home: _home(), )); } class _home extends StatefulWidget { @override State<StatefulWidget> createState() { return _homeState(); } } class _homeState extends State<_home> { int _count = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( backgroundColor: Colors.green,//设置标题栏的背景颜色 title: new Title( child:new Text( '这是一个标题', style: new TextStyle( fontSize: 20.0, color: Colors.white, ), ), color: Colors.white,//设置标题栏文字的颜色(new title的时候color不能为null不然会报错一般可以不用new title 直接new text,不过最终的文字里面还是以里面new text的style样式文字颜色为准) ), centerTitle: true,//设置标题居中 elevation: 10.0,//设置标题栏下面阴影的高度 leading: new Builder( builder: (BuildContext context){ return new GestureDetector(//设置事件 child: new Icon(//设置左边的图标 Icons.account_circle,//设置图标内容 color: Colors.white,//设置图标的颜色 ), onTap:(){ print('点击'); }, onLongPress: (){ Scaffold.of(context).showSnackBar( new SnackBar(content: new Text('长按')) ); }, onDoubleTap: (){ Scaffold.of(context).showSnackBar( new SnackBar(content: new Text('双击')) ); }, ); } ), // brightness:Brightness.dark,//设置明暗模式(不过写了没看出变化,后面再看) primary: true,//是否设置内容避开状态栏 // flexibleSpace: ,//伸缩控件后面再看 // automaticallyImplyLeading: true, actions: <Widget>[ //设置显示在右边的控件 new Padding( child: Row( children: <Widget>[ Container( margin: EdgeInsets.fromLTRB(0, 0, 25, 0),//调整间距 child: new Icon(//设置左边的图标 Icons.add,//设置图标内容 color: Colors.white,//设置图标的颜色 ), ), Container( child: new Icon(//设置左边的图标 Icons.account_circle,//设置图标内容 color: Colors.white,//设置图标的颜色 ), ), ], ), padding: EdgeInsets.all(10.0), ), ], bottom:PreferredSize(//设置标题下面的view child: new Container( height: 50.0, child: new Center( child: new Text( '显示在title下面', ), ), decoration: BoxDecoration( color: Colors.red, ), ), preferredSize: Size.fromHeight(50.0), ), ), ); } }
跑起来