美文网首页Flutter教学
Flutter(80):Scroll组件之SingleChild

Flutter(80):Scroll组件之SingleChild

作者: starryxp | 来源:发表于2020-11-03 16:02 被阅读0次

    Flutter教学目录持续更新中

    Github源代码持续更新中

    1.SingleChildScrollView介绍

    有一个子widget的可滚动的widget,子内容超过父容器时可以滚动。

    2.SingleChildScrollView属性

    • scrollDirection = Axis.vertical:滑动方向
    • reverse = false:是否倒序
    • padding:内边距
    • primary:当内容不足以滚动时,是否支持滚动;
    • physics:控制用户滚动视图的交互
    • controller:滑动控制器
    • child:

    3.使用

      ScrollController _scrollController;
    
      @override
      void initState() {
        _scrollController = ScrollController();
        _scrollController.addListener(() {
          print('_scrollController ${_scrollController.offset}');
        });
        super.initState();
      }
    
      _myChildren() {
        return [
          Container(
            height: 300,
            color: Colors.blue,
          ),
          Container(
            height: 300,
            color: Colors.yellow,
          ),
          Container(
            height: 300,
            color: Colors.red,
          ),
          Container(
            height: 300,
            color: Colors.green,
          ),
        ];
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('SingleChildScrollView'),
          ),
          body: SingleChildScrollView(
            controller: _scrollController,
            reverse: true,
            child: ListBody(
              children: _myChildren(),
            ),
            restorationId: 's1',
          ),
        );
      }
    
      @override
      void dispose() {
        _scrollController.dispose();
        super.dispose();
      }
    
    image.png

    Flutter教学目录持续更新中

    Github源代码持续更新中

    相关文章

      网友评论

        本文标题:Flutter(80):Scroll组件之SingleChild

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