flutter06 - Sliver

SliverGrid

class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
        childAspectRatio: 1.6,
      ),
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int inde) {
          return Container(
            child: Image.network(
              posts[index].imageUrl,
              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(13.0), //設置圓角
              elevation: 14.0, //設置海拔
              shadowColor: Colors.grey.withOpacity(0.5), //不透明度
              child: Stack(
                children: <Widget>[
                  AspectRatio(
                    //方向比例
                    aspectRatio: 16 / 9, //設置比例16:9
                    child: Image.network(
                      posts[index].imageUrl,
                      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.white,
                    ),),
                    Text(posts[index].author, style: TextStyle(
                      fontSize: 12.0,
                      color: Colors.white,),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        childCount: posts.length,
      ),
    );
  }
}

SliverAppBar

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("我是標題"),
//            pinned: true,//設置固定在界面頂部
            floating: true, //隨之滾動,向下滾動一點就接着顯示
            expandedHeight: 160.0, //設置伸展高度
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                "我是標題1111".toUpperCase(), style: TextStyle(
                fontSize: 15.0,
                letterSpacing: 3.0,
                fontWeight: FontWeight.w400,
              ),
              ),
              background: Image.network(
                r"http://pic4.zhimg.com/50/v2-7fece9a613445edb78271216c8c20c6d_hd.jpg",
                fit: BoxFit.cover,),
            ),
          ),

          SliverSafeArea(
            sliver: SliverPadding(
              padding: EdgeInsets.all(8.0),
              sliver: SliverGridDemo(),
            ),
          ),
        ],
      ),
    );
  }
}