选自—————–

flutter开发 

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

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

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: 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: <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(),
              LayoutDemo(),
              ViewDemo(),
              SliverDemo(),
            ],
          ),
          drawer: DrawerDemo(                                                                          ),
          bottomNavigationBar: BottomNavigationBarDemo(),
          
          ),
    );
  }
}

end  bye