（九）Flutter CustomScrollView 之 SliverGrid与SliverList

Android开发 

时常可以见到 一个Material 加上协调者布局 然后可以根据listView或者Recycler滚动 真是是好炫好炫

代码也很多很多

flutter 简化了这一些流程 看如下的ListVIewDemo就可以得知

下面 我直接贴上带注释的源码

第一个是SliverGrid->

新建demo/sliver_grid_demo.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/model/post.dart';

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

新建demo/seliver_list_demo.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/model/post.dart';

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: <Widget>[
                    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: <Widget>[
                          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,
      ),
    );
  }
}

至于那些效果 如何加上的呢

新建 demo/sliver_demo.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/demo/seliver_list_demo.dart';
import 'package:flutter_app/demo/sliver_grid_demo.dart';
import 'package:flutter_app/model/post.dart';

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          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: SliverGridDemo(),
              // sliver: SliverListDemo(),
            ),
          )
        ],
      ),
    );
  }
}

效果-》如何调用的在下方

别嫌弃他丑哈。。因为我没有UI小姐姐去给我弄漂亮的图。。。。

效果到了 就什么也到了

 

调用的地方

import 'package:flutter/material.dart';
import 'package:flutter_app/demo/basic_demo.dart';
import 'package:flutter_app/demo/bottom_navigation_bar_demo.dart';
import 'package:flutter_app/demo/drawer_demo.dart';
import 'package:flutter_app/demo/listview_demo.dart';
import 'package:flutter_app/demo/sliver_demo.dart';
import 'package:flutter_app/demo/sliver_grid_demo.dart';
import 'package:flutter_app/model/post.dart';

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: <Widget>[
            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: <Widget>[
              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: <Widget>[
            ListViewDemo(),
            BasicDemo(),
            SliverDemo(),
            SliverDemo(),
            SliverDemo(),
          ],
        ),
        drawer: DrawerDemo(),
        // bottomNavigationBar: BottomNavigationBarDemo(),
      ),
    );
  }
}