防采集标记:亢少军老师的课程和资料
FlexibleSpaceBar组件效果图
示例代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'FlexibleSpaceBar组件',
home: new Scaffold(
appBar: new AppBar(
title: new Text('FlexibleSpaceBar组件'),
),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
return <Widget>[
SliverAppBar(
//展开高度
expandedHeight: 150.0,
//是否随着滑动隐藏标题
floating: false,
//是否固定在顶部
pinned: true,
//可折叠的应用栏
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'可折叠的组件',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
background: Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549129578802&di=f866c638ea12ad13c5d603bcc008a6c2&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F07%2F66%2F16pic_766297_b.jpg',
fit: BoxFit.cover,
),
),
),
];
},
body: Center(
child: Text('向上提拉,查看效果'),
)
),
),
);
}
}
Flutter技术入门与实战图书查看地址: http://product.dangdang.com/26485813.html
Flutter交流学习群:894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程:https://edu.csdn.net/lecturer/2436