简介

CupertinoScrollbar 是ios样式风格的滚动条

为其可滚动的子元素,构建一个ios风格样式的滚动条

基本用法

这里我们会用一个有CupertinoScrollbar和无CupertinoScrollbar的demo进行对比展示, 通过对比, 我们发现CupertinoScrollbar的子组件, 会有滚动的时候, 右侧会有一个滚动条.

实例演示

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoScrollbarDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<CupertinoScrollbarDemo> {

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CupertinoScrollbar(
            child: Container(
                height: 300,
                child: ListView.custom(
                  scrollDirection: Axis.vertical,
                  childrenDelegate:SliverChildBuilderDelegate((BuildContext context, int index) {
                    return Container(
                      height: 50.0,
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text('list item $index'),
                    );
                  }, childCount: 10),
                )
            )
        ),
        Center(
          child: Text("CupertinoScrollbar效果"),
        )
      ],
    );
  }
}


class NoCupertinoScrollbarDemo extends StatefulWidget {
  _NoCupertinoScrollbarDemo createState() => _NoCupertinoScrollbarDemo();
}

class _NoCupertinoScrollbarDemo extends State<NoCupertinoScrollbarDemo> {

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
            height: 300,
            child: ListView.custom(
              scrollDirection: Axis.vertical,
              childrenDelegate:SliverChildBuilderDelegate((BuildContext context, int index) {
                return Container(
                  height: 50.0,
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('list item $index'),
                );
              }, childCount: 10),
            )
        ),
        Center(
          child: Text("无CupertinoScrollbar效果"),
        )
      ],
    );
  }
}