flutter Sliver
2019-10-11 本文已影响0人
CaptainRoy
Sliver
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
// appBar: AppBar(
// title: Text("九宫格"),
// ),
body: HoneContent(),
),
);
}
}
class HoneContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return SliversWidget();
}
}
class SliversWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return CustomScrollView(
slivers: <Widget>[
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(10),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
delegate: SliverChildBuilderDelegate(
(BuildContext content, int index) {
return Container(
alignment: Alignment(0, 0),
color: Colors.orange,
child: Text("Item$index"),
);
},
childCount: 20
),
),
),
),
],
);
}
}
组合
class CustomScrollViewWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text("组合视图"),
background: Image(
image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
fit: BoxFit.cover,
),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 4.0
),
delegate: SliverChildBuilderDelegate(
(BuildContext context,int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text("GridItem$index"),
);
},
childCount: 10,
),
),
SliverFixedExtentList(
itemExtent: 50,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text("ListItem$index"),
);
},
childCount: 20,
),
),
],
);
}
}