Flutter基础七：Sliver,设置一些样式

最新推荐文章于 2024-07-24 21:46:52 发布

煮酒Shae

最新推荐文章于 2024-07-24 21:46:52 发布

阅读量2.6k

点赞数 1

分类专栏： flutter

本文链接：https://blog.csdn.net/qq_27597629/article/details/108655756

版权

flutter 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

SliverGrid网格视图
6 SliverPadding（内边距）与 SliverSafeArea（安全区）
SliverList列表视图,设置一些样式
8 SliverAppBar：应用工具栏
9 带渐近动画的可伸缩空间，和背景

SliverGrid网格视图

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Scaffold小部件提供了一种界面结构,空白的页面
      body: CustomScrollView(
        //CustomScrollView有个sliver属性
        slivers: <Widget>[
          //一组sliver类型的小部件
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                child: Text("Text$index"),
                /*child: Image.network(
                  posts[index].imageUrl,
                  fit: BoxFit.cover,
                ),*/
              );
            }),
          ), //SliverGrid和GridView类似
        ],
      ),
    );
  }
}

6 SliverPadding（内边距）与 SliverSafeArea（安全区）

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

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Scaffold小部件提供了一种界面结构,空白的页面
      body: CustomScrollView(
        //CustomScrollView有个sliver属性
        slivers: <Widget>[
          SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: SliverGridDemo(), //SliverGrid和GridView类似)
            //一组sliver类型的小部件
          )
        ],
      ),
    );
  }
}

class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          child: Text("Text$index"),
          /*child: Image.network(
                  posts[index].imageUrl,
                  fit: BoxFit.cover,
                ),*/
        );
      }),
    );
  }
}

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

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Scaffold小部件提供了一种界面结构,空白的页面
      body: CustomScrollView(
        //CustomScrollView有个sliver属性
        slivers: <Widget>[
          SliverSafeArea(
              //在安全的区域内显示
              sliver: SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: SliverGridDemo(), //SliverGrid和GridView类似)
            //一组sliver类型的小部件
          ))
        ],
      ),
    );
  }
}

class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            child: Text("Text$index"),
            /*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(12.0), //圆角
            elevation: 14.0, //阴影
            shadowColor: Colors.grey.withOpacity(0.5), //阴影颜色
            child: Container(
              color: Colors.red,
              child: Text("Text$index"),
              /*child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                ),*/
            ),
          ),
        );
      }),
    );
  }
}

设置比列的话

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.grey.withOpacity(0.5), //阴影颜色
            color: Colors.red,
            child: AspectRatio(
              aspectRatio: 16 / 9, //设置比列的话
              child: Text("Text$index"),
              /*child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                ),*/
            ),
          ),
        );
      },
      childCount: posts.length,
      ),
    );
  }
}

添加一些文字并设置文字样式

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.grey.withOpacity(0.5), //阴影颜色
              color: Colors.red,
              child: Stack(children: <Widget>[
                AspectRatio(
                  aspectRatio: 16 / 9, //设置比列的话
                  child: Text("Text$index"),
                  /*child: Image.network(
                  posts[index].imageUrl,
                  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.white)),
                        Text(posts[index].author,
                            style: TextStyle(
                                //设置文字样式
                                fontSize: 13.0,
                                color: Colors.white)),
                      ],
                    ))
              ]),
            ),
          );
        },
        childCount: posts.length,
      ),
    );
  }
}

在这里插入图片描述

注意SliverList和SliverGrid都要加childCount属性

8 SliverAppBar：应用工具栏

和AppBar类似，AppBar是固定在屏幕上方。SliverAppBar可以去设置一些行为。

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Scaffold小部件提供了一种界面结构,空白的页面
      body: CustomScrollView(
        //CustomScrollView有个sliver属性
        slivers: <Widget>[
          SliverAppBar(
            //会有个渐进的效果，滚动到一定程度会消失或再现
            title: Text('ninghao'),
            //pinned: true, //固定在顶部，不消失
            floating: true,//向下滚动会消失，向上滚动一点就马上显示出来
          ),
          SliverSafeArea(
              //在安全的区域内显示
              sliver: SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: SliverListDemo(), //SliverGrid和GridView类似)
            //一组sliver类型的小部件
          ))
        ],
      ),
    );
  }
}

在这里插入图片描述

9 带渐近动画的可伸缩空间，和背景

class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Scaffold小部件提供了一种界面结构,空白的页面
      body: CustomScrollView(
        //CustomScrollView有个sliver属性
        slivers: <Widget>[
          SliverAppBar(
            //会有个渐进的效果，滚动到一定程度会消失或再现
            //title: Text('ninghao'),
            //pinned: true, //固定在顶部，不消失
            floating: true, //向下滚动会消失，向上滚动一点就马上显示出来
            expandedHeight: 178.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                'ninghaoFlutter'.toUpperCase(),
                style: TextStyle(
                  fontSize: 15.0, //文字大小
                  letterSpacing: 3.0, //文字间距
                  fontWeight: FontWeight.w100, //文字粗细
                ),
              ),
              background: Image.network(//添加背景，是一张图片
                'https://resources.ninghao.net/images/overkill.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverSafeArea(
              //在安全的区域内显示
              sliver: SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: SliverListDemo(), //SliverGrid和GridView类似)
            //一组sliver类型的小部件
          ))
        ],
      ),
    );
  }
}