CustomScrollView
SliverToBoxAdapter
用作在slivers中包裹需要放在滚动列表中的元素
SliverToBoxAdapter(
child: Container(
height: 100,
child: Text("Grid列表"),
),
)
SliverAppBar属性
const SliverAppBar({
Key key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,// 设置拉伸模式(http://laomengit.com/flutter/widgets/FlexibleSpaceBar.html)
this.bottom,
this.elevation,
this.forceElevated = false,
this.backgroundColor,
this.brightness,
this.iconTheme,
this.actionsIconTheme,
this.textTheme,
this.primary = true,//此应用栏是否显示在屏幕顶部
this.centerTitle,//标题是否居中显示,默认值根据不同的操作系统
this.titleSpacing = NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距
this.expandedHeight,//展开高度
this.floating = false,//是否随着滑动隐藏标题
this.pinned = false,//是否固定在顶部
this.snap = false,//与floating结合使用
this.stretch = false,//是否可拉伸
this.stretchTriggerOffset = 100.0,//拉伸对齐偏移量设置
this.onStretchTrigger,//当拉伸超过stretchTriggerOffset时触发该方法
this.shape,
}
void main() => runApp(new MyApp());
//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'welcome',
home: new Scaffold(
appBar: new AppBar(
title: new Text('首页'),
),
body: CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
pinned: true,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
title: Text('复仇者联盟'),
background: Image.network(
'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
fit: BoxFit.fitHeight,
),
),
stretch: true,
stretchTriggerOffset: 50,
onStretchTrigger: () {
print('onStretchTrigger');
return null;
},
),
],
),
//new Center(child: ShopTabBarWidget()),
//bottomNavigationBar: new BottomNavigationWidget(),
),
);
}
}
SliverPadding属性
const SliverPadding({
Key key,
@required this.padding,//内边距
Widget sliver,//子widget
}
例子
new SliverPadding(
padding: EdgeInsets.all(10),
sliver: SliverToBoxAdapter(
child: Text("铁马山河入梦来"),
),
)
SliverGrid(网格)属性
const SliverGrid({
Key key,
@required SliverChildDelegate delegate,//为GridView提供子代的委托
@required this.gridDelegate,//一个控制 GridView 中子项布局的委托。
})
例子
new SliverPadding(
padding: EdgeInsets.all(10),
sliver: new SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 3.0, //子控件宽高比
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(10),
child: Text('data $index'),
),
);
},
childCount: 20,
),
),
)
SliverList(列表)属性
SliverChildDelegate
CustomScrollView 属性
const CustomScrollView({
Key key,
Axis scrollDirection = Axis.vertical,//滚动方向 vertical垂直滚动
bool reverse = false,//滚动开始方向,false从头开始滚动,true从尾开始滚动
ScrollController controller,//控制器
bool primary,//是否使用主题色
ScrollPhysics physics,//滑动到底部回弹效果
NeverScrollableScrollPhysics()禁止滚动
AlwaysScrollableScrollPhysics()允许滚动
ClampingScrollPhysics()Android下微光效果
BouncingScrollPhysics()iOS下弹性效果
bool shrinkWrap = false,//该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时(例如listview嵌套listview),被嵌套的shrinkWrap必须为true,否则Flutter会给出警告
Key center,//中心
double anchor = 0.0,//锚点
double cacheExtent,//缓存区域
this.slivers = const <Widget>[],//子widget数组
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,//确定处理拖动开始行为的方式 默认为DragStartBehavior.start
})
例子
void main() => runApp(new MyApp());
//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'welcome',
home: new Scaffold(
appBar: new AppBar(
title: new Text('首页'),
),
body: CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
pinned: true,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
title: Text('复仇者联盟'),
background: Image.network(
'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
fit: BoxFit.fitHeight,
),
),
stretch: true,
stretchTriggerOffset: 50,
onStretchTrigger: () {
print('onStretchTrigger');
return null;
},
),
new SliverPadding(
padding: EdgeInsets.all(10),
sliver: new SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 3.0, //子控件宽高比
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(10),
child: Text('data $index'),
),
);
},
childCount: 9,
),
),
),
new SliverList(
delegate: SliverChildListDelegate(
//返回组件集合
List.generate(5, (int index) {
//返回 组件
return GestureDetector(
onTap: () {
print("点击$index");
},
child: Card(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(10),
child: Text('data $index'),
),
),
);
}),
),
),
],
),
),
);
}
}
版权声明:本文为qq_18133317原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。