Flutter 滚动控件

SingleChildScrollView

滚动组件，类似于AndROId中的ScrollView，只能接收一个子元素。

scrollDirectionF1a;滚动方向。

BouncingScrollPhysics：滚动到边界效果。

• ClampingScrollPhysics：类似安卓效果，会有微光显示。
• BouncingScrollPhysics：类似ios效果，会有回弹。

Scrollbar(
    child: Container(
        width: double.infinITy,
        child: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            padding: EdgeInsets.all(10),
            child: Column(
                children:
                str.split("").map((e) => Text(e, textScaleFactor: 2)).toList(),
            ),
        ),
    ),
)

ListView

itemExtent：子组件长度，指定itemExtent后有利于提高性能，避免每次构建子组件时再次计算。

PRototyPEItem：列表项原型，指定子元素的Widget。有利于提供ListView性能，与itemExtent互斥。

shrinkWrap：是否根据子组件的总长度设置ListView的长度，默认为false。如果为false时，ListView会在主轴方向尽可能多占空间。

默认构造函数

适合数据量比较小。

ListView(
    shrinkWrap: true,
    padding: Edgeinsets.all(20),
    children: [
        Text("A"),
        Text("B"),
        Text("C"),
        Text("D"),
    ],
)

ListView.builder

适合数据量比较多或不确定的情况。

itemCount：子元素数量。如果为null，表示无限列表。

itemBuilder：设置子元素的Widget。

ListView.builder(
    itemCount: null,
    itemExtent: 50,
    itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("$index"));
    }
)

ListView.separated

可以给ListView添加一个分割线。

Widget divider1 = Divider(color: Colors.red);
Widget divider2 = Divider(color: Colors.blue);

ListView.separated(
    itemCount: 100,
    itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("$index"));
    },
    separatorBuilder: (BuildContext context, int index) {
        return index % 2 == 0 ? divider1 : divider2;
    },
)

ScrollController

监听滚动组件。

offset：滚动距离。

aniMATETo & jumpTo：滚动到指定位置，前者滚动时会执行动画，后者则不会。

addListener：监听滚动组件。

class ListViewPage extends statefulWidget {
    @override
    State<StatefulWidget> createstate() {
        return _ListViewPageState();
    }
}

class _ListViewPageState extends State<ListViewPage> {
    final ScrollController _controller = ScrollController();
    bool showTopBTn = false;

    @override
    void initState() {
        super.initState();
        _controller.addListener(() {
            print("滚动距离：${_controller.offset}");
            if (_controller.offset < 1000) {
                if (showTopBtn) {
                    showTopBtn = false;
                    setState(() {});
                }
            } else {
                if (!showTopBtn) {
                    showTopBtn = true;
                    setState(() {});
                }
            }
        });
    }

    @override
    void dispose() {
        super.dispose();
        _controller.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("ListView"),
                actions: [],
            ),
            body: ListView.builder(
                itemCount: null,
                itemExtent: 50,
                physics: BouncingScrollPhysics(),
                controller: _controller,
                itemBuilder: (BuildContext context, int index) {
                    return ListTile(title: Text("$index"));
                }),
            floatingActionButton: !showTopBtn
            ? null
            : FloatingActionButton(
                onPressed: () {
                    _controller.animateTo(
                        0,
                        duration: Duration(microseconds: 800),
                        curve: Curves.ease,
                    );
                },
                child: Icon(Icons.arrow_upward),
            ),
        );
    }
}

NotificationListener

可以监听ListView、NestedScrollView、GridView的滚动监听。

NotificationListener与ScrollController对比

• NotificationListener可以在任意位置监听，并且携带的信息更多。
• ScrollController只能和具体的滚动组件关联后才能监听，只能获取当前滚动位置。

ScrollNotification类里包含一个metrics属性，其类型是ScrollMetrics，包含一些信息：

VAR extentBefore = notification.metrics.extentBefore; //已滑出ViewPort顶部的长度，已滚动距离
var extentInside = notification.metrics.extentInside; //ViewPort内部长度，表示屏幕显示的列表部分的长度
var extentAfter = notification.metrics.extentAfter; //未划入ViewPort部分的长度
var pixels = notification.metrics.pixels; //当前滚动距离
var maxScrollExtent = notification.metrics.maxScrollExtent; //最大可滚动距离

class NotificationListenerPage extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return _NotificationListenerPageState();
    }
}

class _NotificationListenerPageState extends State<NotificationListenerPage> {
    String _progress = "0%";

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("滚动监听")),
            body: Scrollbar(
                child: NotificationListener<ScrollNotification>(
                    onNotification: (ScrollNotification notification) {
                        double progress = notification.metrics.pixels /
                            notification.metrics.maxScrollExtent;
                        setState(() => _progress = "${(progress * 100).toInt()}%");
                        return false;
                    },
                    child: Stack(
                        alignment: Alignment.center,
                        children: [
                            ListView.builder(
                                itemCount: 100,
                                itemExtent: 50,
                                itemBuilder: (context, index) => ListTile(
                                    title: Text("$index"),
                                ),
                            ),
                            CircleAvatar(
                                radius: 30,
                                child: Text(_progress),
                                backgroundColor: Colors.transparent.withAlpha(200),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}