Flutter基础控件:CustomScrollView

SliverToBoxAdapter

用作在slivers中包裹需要放在滚动列表中的元素

SliverToBoxAdapter(
    child: Container(
          height: 100,
          child: Text("Grid列表"),
    ),
 )

SliverAppBar属性

同AppBar一样,功能更强大

const SliverAppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,// 设置拉伸模式(http://laomengit.com/flutter/widgets/FlexibleSpaceBar.html)
    this.bottom,
    this.elevation,
    this.forceElevated = false,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,//此应用栏是否显示在屏幕顶部
    this.centerTitle,//标题是否居中显示,默认值根据不同的操作系统
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//横轴上标题内容 周围的间距
    this.expandedHeight,//展开高度
    this.floating = false,//是否随着滑动隐藏标题
    this.pinned = false,//是否固定在顶部
    this.snap = false,//与floating结合使用
    this.stretch = false,//是否可拉伸
    this.stretchTriggerOffset = 100.0,//拉伸对齐偏移量设置
    this.onStretchTrigger,//当拉伸超过stretchTriggerOffset时触发该方法
    this.shape,
  }
void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'welcome',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页'),
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            new SliverAppBar(
              pinned: true,
              expandedHeight: 200,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('复仇者联盟'),
                background: Image.network(
                  'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
                  fit: BoxFit.fitHeight,
                ),
              ),
              stretch: true,
              stretchTriggerOffset: 50,
              onStretchTrigger: () {
                print('onStretchTrigger');
                return null;
              },
            ),
          ],
        ),
        //new Center(child: ShopTabBarWidget()),
        //bottomNavigationBar: new BottomNavigationWidget(),
      ),
    );
  }
}

SliverPadding属性

 const SliverPadding({
    Key key,
    @required this.padding,//内边距
    Widget sliver,//子widget
  }

例子

new SliverPadding(
      padding: EdgeInsets.all(10),
      sliver: SliverToBoxAdapter(
             child: Text("铁马山河入梦来"),
      ),
)

SliverGrid(网格)属性

更详细解说参考

  const SliverGrid({
    Key key,
    @required SliverChildDelegate delegate,//为GridView提供子代的委托
    @required this.gridDelegate,//一个控制 GridView 中子项布局的委托。
  }) 

例子

new SliverPadding(
              padding: EdgeInsets.all(10),
              sliver: new SliverGrid(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200.0,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 3.0, //子控件宽高比
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Card(
                      child: Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.all(10),
                        child: Text('data $index'),
                      ),
                    );
                  },
                  childCount: 20,
                ),
              ),
            )

SliverList(列表)属性

SliverChildDelegate

CustomScrollView 属性

  const CustomScrollView({
    Key key,
    Axis scrollDirection = Axis.vertical,//滚动方向 vertical垂直滚动
    bool reverse = false,//滚动开始方向,false从头开始滚动,true从尾开始滚动
    ScrollController controller,//控制器
    bool primary,//是否使用主题色
    ScrollPhysics physics,//滑动到底部回弹效果
							NeverScrollableScrollPhysics()禁止滚动
							AlwaysScrollableScrollPhysics()允许滚动
							ClampingScrollPhysics()Android下微光效果
							BouncingScrollPhysics()iOS下弹性效果
    bool shrinkWrap = false,//该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时(例如listview嵌套listview),被嵌套的shrinkWrap必须为true,否则Flutter会给出警告
    Key center,//中心
    double anchor = 0.0,//锚点
    double cacheExtent,//缓存区域
    this.slivers = const <Widget>[],//子widget数组
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,//确定处理拖动开始行为的方式 默认为DragStartBehavior.start
  })

例子

void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'welcome',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页'),
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            new SliverAppBar(
              pinned: true,
              expandedHeight: 200,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('复仇者联盟'),
                background: Image.network(
                  'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
                  fit: BoxFit.fitHeight,
                ),
              ),
              stretch: true,
              stretchTriggerOffset: 50,
              onStretchTrigger: () {
                print('onStretchTrigger');
                return null;
              },
            ),
            new SliverPadding(
              padding: EdgeInsets.all(10),
              sliver: new SliverGrid(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200.0,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 3.0, //子控件宽高比
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Card(
                      child: Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.all(10),
                        child: Text('data $index'),
                      ),
                    );
                  },
                  childCount: 9,
                ),
              ),
            ),
            new SliverList(
              delegate: SliverChildListDelegate(
                //返回组件集合
                List.generate(5, (int index) {
                  //返回 组件
                  return GestureDetector(
                    onTap: () {
                      print("点击$index");
                    },
                    child: Card(
                      child: Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.all(10),
                        child: Text('data $index'),
                      ),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

版权声明:本文为qq_18133317原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。