美文网首页
10.Sliver的简单使用

10.Sliver的简单使用

作者: 凯司机 | 来源:发表于2020-06-06 20:16 被阅读0次

import 'package:flutter/material.dart';

main() => runApp(KSJMyApp());

class KSJMyAppextends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MyApp(),

    );

  }

}

class MyAppextends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('KSJ'),

      ),

      body: CustomScrollView(

slivers: [

SliverAppBar(

expandedHeight:300,

            flexibleSpace: FlexibleSpaceBar(

title: Text("Hello World1"),

              background: Image.network("https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg", fit: BoxFit.cover,),

            ),

            pinned:true,

          ),

          SliverGrid(

delegate: SliverChildBuilderDelegate(

(BuildContext context, int index) {

return Container(

color: index %2 ==0 ? Colors.red : Colors.black,

                    );

                  },

                  // 如果不设置滚动的数量,该控件将拥有无限的子控件

                  childCount:50),

              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount:5,

                  crossAxisSpacing:5,

                  mainAxisSpacing:10,

                  childAspectRatio:1.5)

),

          SliverAppBar(

pinned:true,

            flexibleSpace: FlexibleSpaceBar(

title: Text("Hello World2"),

            ),

          ),

          SliverList(

delegate: SliverChildBuilderDelegate(

(BuildContext context, int index) {

return Container(

width:30,

                  height:30,

                  color: index %2 ==0 ? Colors.red : Colors.black,

                );

              },

              childCount:50,

            ),

          )

],

      ),

      floatingActionButton: FloatingActionButton(

child: Icon(Icons.add),

          onPressed: () {

print("+++");

          }),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );

  }

}

class SliverDemo1extends StatelessWidget {

const SliverDemo1({

Key key,

  }) :super(key: key);

  @override

Widget build(BuildContext context) {

return CustomScrollView(

// 这个控件不能放入普通widgets

      slivers: [

// 两个代理,一个用来布局,一个用来创建控件

// 注意此处安全区的概念——这里的安全区可以被滚动到

        SliverSafeArea(

sliver: SliverPadding(

// 这里注意Padding的使用可以被滚动到

            padding: EdgeInsets.all(10),

            sliver: SliverGrid(

delegate: SliverChildBuilderDelegate(

(BuildContext context, int index) {

return Container(

color: index %2 ==0 ? Colors.red : Colors.black,

                      );

                    },

                    // 如果不设置滚动的数量,该控件将拥有无限的子控件

                    childCount:100),

                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount:5,

                    crossAxisSpacing:5,

                    mainAxisSpacing:10,

                    childAspectRatio:1.5)),

          ),

        ),

      ],

    );

  }

}

相关文章

  • 10.Sliver的简单使用

    import 'package:flutter/material.dart'; main() => runApp(...

  • 简单使用

    创建模型 过滤器 我们有一些字段和我们想让用户筛选的基础上 名称、价格或release_date。 我们创建一个 ...

  • gorange

    数组中简单使用 map中简单使用

  • UICollectionViewLayout的简单使用(简单瀑布

    对于需要使用到列表的页面,一般是使用UITableView或者是UICollectionView来实现。一直以来都...

  • 零碎的小程序笔记

    目录 template的简单使用WXS的简单使用npm的简单使用倒计时js的实现wx:for的使用一些js方法记录...

  • 简单使用使用kaggle

    向我这样的条件不好的可以考虑借助云gpu来加速训练,借助kaggle可以在kaggle服务器上训练数据,kaggl...

  • 命令行的简单使用

    Git命令行的简单使用,仅供自己使用 pod命令行的简单使用

  • Alamofire类似AFNetworking的简单使用和封装

    简单的使用。简单的使用。简单的使用。注定该文弱鸡一个,求拍砖。 一、介绍 Alamofire(Swift)的前身是...

  • shiro的简单使用

    大家好,我是IT修真院北京分院第26期的学员,一枚正直纯洁善良的JAVA程序员 今天给大家分享一下,修真院官网JA...

  • RAC的简单使用

    新项目今天提测,项目中用到了RAC&MVVM框架,简单记录下RAC的简单使用 项目是OC开发,用的是Reactiv...

网友评论

      本文标题:10.Sliver的简单使用

      本文链接:https://www.haomeiwen.com/subject/mweftktx.html