gridview标题居中显示_Flutter第六期 - ListView+GridView混合

列表是APP的核心功能，目前这个库不算完善，以后国外的大神应该会补全，现在的样式就是很基础的东西，解决一些常用的加载，至于后面的自定义tag需要一个过程，混合布局可以参考flutter_staggered_grid_view，下面是基础的写法：

import 'package:flutter/material.dart';void main() => runApp(new MyApp());//Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.//Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {// final wordPair = new WordPair.random(); return new MaterialApp( title: 'ListView3+GridView33', debugShowCheckedModeBanner: false, theme: new ThemeData( primarySwatch: Colors.blue,// fontFamily: 'fontdemo1' ), home: new Scaffold( appBar: new AppBar( title: new Text('图片加载'), ), body: new Center(// child: new ListView(// shrinkWrap: true,// padding: const EdgeInsets.all(20.0),// children: [// const Text('I'm dedicating every day to you'),// const Text('Domestic life was never quite my style'),// const Text('When you smile, you knock me out, I fall apart'),// const Text('And I thought I was so smart'),// ],// ),// child: new ListView3(),// child: new GridView3(),// child: new GridView33(), child: new InfiniteGridView(), ), ), ); }}class ListView3 extends StatelessWidget { @override Widget build(BuildContext context) { //下划线widget预定义以供复用。 Widget divider1 = Divider( color: Colors.blue, ); Widget divider2 = Divider(color: Colors.green); return ListView.separated( itemCount: 100, //列表项构造器 itemBuilder: (BuildContext context, int index) { return ListTile(title: Text("$index")); }, //分割器构造器 separatorBuilder: (BuildContext context, int index) { return index % 2 == 0 ? divider1 : divider2; }, ); }}class GridView3 extends StatelessWidget { @override Widget build(BuildContext context) { return GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, //横轴三个子widget childAspectRatio: 1.0, //宽高比为1时，子widget ), children: [ Icon(Icons.ac_unit), Icon(Icons.airport_shuttle), Icon(Icons.all_inclusive), Icon(Icons.beach_access), Icon(Icons.cake), Icon(Icons.free_breakfast) ]); }}class GridView33 extends StatelessWidget { @override Widget build(BuildContext context) { return GridView( padding: EdgeInsets.zero, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 120.0, childAspectRatio: 2.0, //宽高比为2 ), children: [ Icon(Icons.ac_unit), Icon(Icons.airport_shuttle), Icon(Icons.all_inclusive), Icon(Icons.beach_access), Icon(Icons.cake), Icon(Icons.free_breakfast), ], ); }}class InfiniteGridView extends StatefulWidget { @override _InfiniteGridViewState createState() => new _InfiniteGridViewState();}class _InfiniteGridViewState extends State { List _icons = []; //保存Icon数据 @override void initState() { // 初始化数据 _retrieveIcons(); } @override Widget build(BuildContext context) { return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, //每行三列 childAspectRatio: 1.0 //显示区域宽高相等 ), itemCount: _icons.length, itemBuilder: (context, index) { //如果显示到最后一个并且Icon总数小于200时继续获取数据 if (index == _icons.length - 1 && _icons.length < 200) { _retrieveIcons(); } return Icon(_icons[index]); } ); } //模拟异步获取数据 void _retrieveIcons() { Future.delayed(Duration(milliseconds: 200)).then((e) { setState(() { _icons.addAll([ Icons.ac_unit, Icons.airport_shuttle, Icons.all_inclusive, Icons.beach_access, Icons.cake, Icons.free_breakfast ]); }); }); }}

ListView+GridView图文混合：

import 'package:flutter/material.dart';void main() => runApp(new MyApp());//Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.//Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {// final wordPair = new WordPair.random(); return new MaterialApp( title: 'ListView+GridView综合布局', debugShowCheckedModeBanner: false, theme: new ThemeData( primarySwatch: Colors.blue,// fontFamily: 'fontdemo1' ), home: new Scaffold(// appBar: new AppBar( title: new Text('图片加载'), ), body: new Center(// child: new ListView(// shrinkWrap: true,// padding: const EdgeInsets.all(20.0),// children: [// const Text('I'm dedicating every day to you'),// const Text('Domestic life was never quite my style'),// const Text('When you smile, you knock me out, I fall apart'),// const Text('And I thought I was so smart'),// ],// ),// child: new ListView3(),// child: new GridView3(),// child: new GridView33(), child: new CustomScrollViewTestRoute(), ), ), ); }}class CustomScrollViewTestRoute extends StatelessWidget { @override Widget build(BuildContext context) { //因为本路由没有使用Scaffold，为了让子级Widget(如Text)使用 //Material Design 默认的样式风格,我们使用Material作为本路由的根。 return Material( child: CustomScrollView( slivers: [ //AppBar，包含一个导航栏 SliverAppBar( //标题居中 centerTitle: true, leading: Builder(builder: (context) { return IconButton( icon: Icon(Icons.arrow_back, color: Colors.white), //自定义图标 onPressed: () { // }, ); }),// leading: Icon(// Icons.arrow_back,// ), //展开高度250 expandedHeight: 250.0, //不随着滑动隐藏标题 floating: false, //固定在顶部 pinned: true, flexibleSpace: FlexibleSpaceBar( title: const Text('YUN'), background: Image.asset( "assets/images/food04.jpeg