07-Flutter 滚动组件

滚动组件

• ListView，GridView
• SingleScrollView
• CustomerScrollView

滚动组件分为两类：

• 具有延迟加载特性的滚动组件，如：ListView，GridView
• 一次性加载所有组件,如SingleChildScrollView

如果说页面上的内容很多，大大的超过了一个屏幕，使用SingleChildScrollView，会比较耗内存，性能也会比较差

建议使用ListView或者GridView这种具有延迟加载特性的组件
下面使用ListView示例，属性说明见代码注释

Container(
          child: Flex(
        direction: Axis.horizontal,
        children: [
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.white,
              child: ListView.builder(
                itemExtent: 100, //指定子组件的高度，如果指定了效率更高，不用每次都去计算子组件的高度了
                itemCount: 100, //子组件的个数
                shrinkWrap: false, //ListView的高度是否是内容包裹，否则撑到最大,如果ListView的父容器没有边界，则必须设置为true
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 200, //上面指定了itemExtent之后，该属性无效
                    margin: EdgeInsets.all(10), color: Colors.red,
                  );
                },
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.yellow, 
              //带分割线的ListView构造函数
              child: ListView.separated(
                itemCount: 10, //子组件的个数
                shrinkWrap: false, //ListView的高度是否是内容包裹，否则撑到最大,如果ListView的父容器没有边界，则必须设置为true
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 100, //上面指定了itemExtent之后，该属性无效
//                    margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
                    color: Colors.blue,
                  );
                },
                separatorBuilder: (BuildContext context, int index) {
                  return Divider(
                    color: Colors.black,
                    height: 30,
                    //间距的高度-包括了线的高度
                    thickness: 0.1,
                    //线条的高度
                    indent: 10,
                    //左边距
                    endIndent: 10, //右边距
                  );
                },
              ),
            ),
          ),
        ],
      )),

widget_listview.png

使用SingleScrollView

 SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: 100,
        color: Colors.red,
        child: Center(
          child: Text("SingleChildScrollView的使用"),
        ),
      ),
      Container(
        height: 400,
        color: Colors.blue,
        child: Center(
          child: Text("SingleChildScrollView的使用"),
        ),
      ),
      Container(
        height: 400,
        color: Colors.yellow,
        child: Center(
          child: Text("SingleChildScrollView的使用"),
        ),
      ),
    ],
  ),

widget_singlescrollview.png