sliverappbar高度_flutter AppBar和SliverAppBar,以及Scaffold.appBar
AppBarimport 'package:flutter/material.dart';voidmain() {runApp( MaterialApp(title:'Flutter gesture',home: _home(),));}class_home extends StatefulWidget {@overrideStatecreateState() {return_homeState(
AppBar
import 'package:flutter/material.dart';voidmain() {
runApp( MaterialApp(
title:'Flutter gesture',
home: _home(),
));
}class_home extends StatefulWidget {
@override
StatecreateState() {return_homeState();
}
}class _homeState extends State<_home>{
final GlobalKey scaffoldKey = GlobalKey();
final SnackBar snackBar= const SnackBar(content: Text('Showing Snackbar'));voidopenPage(BuildContext context) {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {returnScaffold(
appBar: AppBar(
title:const Text('Next page'),
),
body:constCenter(
child: Text('This is the next page',
style: TextStyle(fontSize:24),
),
),
);
},
));
}//...
Widget build(BuildContext context) {returnScaffold(
key: scaffoldKey,
appBar: AppBar(
title:const Text('AppBar Demo'),
actions:[
IconButton(
icon:constIcon(Icons.add_alert),
tooltip:'Show Snackbar',
onPressed: () {
scaffoldKey.currentState.showSnackBar(snackBar);
},
),
IconButton(
icon:constIcon(Icons.navigate_next),
tooltip:'Next page',
onPressed: () {
openPage(context);
},
),
],
),
body:constCenter(
child: Text('This is the home page',
style: TextStyle(fontSize:24),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp( MaterialApp(
title: 'Flutter gesture',
home: DiscoverListPage(),
));
}
class DiscoverListPage extends StatefulWidget {
@override
State createState() => DiscoverListState();
}
class DiscoverListState extends State
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: _sliverBuilder,
body: Center(
child: ListView.builder(
itemBuilder: _itemBuilder,
itemCount: 150,
),
)),
);
}
List _sliverBuilder(BuildContext context, bool innerBoxIsScrolled) {
return [
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';voidmain() {
runApp( MaterialApp(
title:'Flutter gesture',//home: TutorialHome(),
home: _home(),
));
}class_home extends StatefulWidget {
@override
StatecreateState() {return_homeState();
}
}class _homeState extends State<_home>{int _count = 0;
@override
Widget build(BuildContext context) {returnScaffold(
appBar:newAppBar(
backgroundColor: Colors.green,//设置标题栏的背景颜色
title: newTitle(
child:newText('这是一个标题',
style:newTextStyle(
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: newBuilder(
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: [ //设置显示在右边的控件
newPadding(
child: Row(
children:[
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: newContainer(
height:50.0,
child:newCenter(
child:newText('显示在title下面',
),
),
decoration: BoxDecoration(
color: Colors.red,
),
),
preferredSize: Size.fromHeight(50.0),
),
),
);
}
}
跑起来
更多推荐

所有评论(0)