Android开发
时常可以见到 一个Material 加上协调者布局 然后可以根据listView或者Recycler滚动 真是是好炫好炫
代码也很多很多
flutter 简化了这一些流程 看如下的ListVIewDemo就可以得知
下面 我直接贴上带注释的源码
第一个是SliverGrid
class SliverGridDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
child: Image.network(
posts[index].imgeUrl,
fit: BoxFit.cover,
),
);
},
childCount: posts.length,
),
);
}
}下面这个是SliverList
class SliverListDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: EdgeInsets.only(bottom: 32.0),
child: Material(
borderRadius: BorderRadius.circular(12.0),
elevation: 14.0,
shadowColor: Colors.green.withOpacity(0.5),
child: Stack(
children: [
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(
posts[index].imgeUrl,
fit: BoxFit.cover,
),
),
Positioned(
top: 32.0,
left: 32.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
posts[index].title,
style: TextStyle(
fontSize: 20.0, color: Colors.greenAccent),
),
Text(
posts[index].author,
style: TextStyle(
fontSize: 23.0, color: Colors.greenAccent),
),
],
),
)
],
)),
);
},
childCount: posts.length,
),
);
}
} 至于那些效果 如何加上的呢
class SliverDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text("liuan"),
//固定在上面 不随着list滚动
//pinned: true,
// 想下滚动显示 向上 跟随影藏
floating: true,
// 新写一个面板跟随下滑显示 上滑消失 并伴随渐变动画
expandedHeight: 178.0,
flexibleSpace: FlexibleSpaceBar(
title: Text(
"liuan".toUpperCase(),
style: TextStyle(
fontSize: 15,
letterSpacing: 3.0,
fontWeight: FontWeight.w400,
),
),
background: Image.network(
posts[0].imgeUrl,
fit: BoxFit.cover,)
),
),
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(8.0),
sliver: SliverListDemo(),
),
)
],
),
);
}
} 调用的地方
import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/basic_demo.dart';
import 'package:nihao_flutter/demo/bottom_navigation_bar_demo.dart';
import 'package:nihao_flutter/demo/drawer_demo.dart';
import 'package:nihao_flutter/demo/layout_demo.dart';
import 'package:nihao_flutter/demo/listview_demo.dart';
import 'package:nihao_flutter/demo/sliver_demo.dart';
import 'package:nihao_flutter/demo/view_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70),
);
}
}class Home extends StatelessWidget {@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 5,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigration',
onPressed: () => debugPrint('Navigration Button is pressed.'),
),
title: Text('app Bar'),
actions: [
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: () => debugPrint('search Button is pressed.'),
),
],
// 阴影
elevation: 0.0,
bottom: TabBar(
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black54,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 1.0,
tabs: [
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.view_quilt)),
Tab(icon: Icon(Icons.video_label)),
],
),
),
body: TabBarView(
children: [
ListViewDemo(),
BasicDemo(),
LayoutDemo(),
ViewDemo(),
SliverDemo(),
],
),
drawer: DrawerDemo(),
bottomNavigationBar: BottomNavigationBarDemo(),),
);
}
}
【030Flutter|（九）Flutter CustomScrollView 之 SliverGrid与SliverList】endbye
