Flutter-SingleChildScrollView

最新推荐文章于 2024-08-27 20:49:40 发布

KyungLip

最新推荐文章于 2024-08-27 20:49:40 发布

阅读量776

点赞数

分类专栏： Android Dart 文章标签： android flutter

本文链接：https://blog.csdn.net/KyungLip/article/details/110823282

版权

Android 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Dart

2 篇文章 0 订阅

订阅专栏

SingleChildScrollView是Flutter中的滚动视图组件，类似于Android的ScrollView。它仅接受一个子Widget，并适用于内容不会超出屏幕的情况。主要参数包括scrollDirection（滑动方向）、reverse（反向滑动）等。示例中展示了垂直滑动的SingleChildScrollView，包含100个数据项的列表。

摘要由CSDN通过智能技术生成

SingleChildScrollView 类似与Android中的ScrollView,只能拥有一个子View。

使用场景

SingleChildScrollView不支持Sliver的延迟优化加载模型，所以只适用于不会超出屏幕太多的的时候使用。

构造函数

    Key key,
    this.scrollDirection = Axis.vertical,
    this.reverse = false,
    this.padding,
    bool primary,
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
    this.clipBehavior = Clip.hardEdge,
    this.restorationId,
  })

主要参数说明

scrollDirection:滑动方向,垂直:Axis.vertical;水平:Axis.horizontal。
reverse:按照阅读相反方向滑动，举个例子:水平滑动数据1…100,如果reverse:true,那么0在左边开始位置，滑动也是从左侧向右侧开始滑动。如果reverse:false，那么100展示在右边，滑动也是从右侧开始向左侧滑动。

Sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/poitop/PoiApi.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageStqate();
  }
}

class _HomePageStqate extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SingleChildScrollView"),
      ),
      body: Container(
        color: Colors.blue,
        width: double.infinity,
        height: double.infinity,
        child: CupertinoScrollbar(
          child:SingleChildScrollView(
            scrollDirection: Axis.vertical,
            reverse: false,
            physics: BouncingScrollPhysics(),
            child: Column(
              children: getListItems(),
            ),
          ),
        ),
      )
    );
  }

  List<Widget> getListItems(){
    List<Widget>list=new List();
    for(int i=0;i<100;i++){
      list.add(getTextView(i));
    }
    return list;
  }
  Widget getTextView(int index){
    return Text("DATA$index");
  }
}