ListView

作者: 习惯了_就好 | 来源:发表于2018-11-20 11:15 被阅读7次
/**
    ListView({
    Key key,
    Axis scrollDirection = Axis.vertical,//滚动方向
    bool reverse = false,//是否反向显示数据
    ScrollController controller,//设置listview初始位置
    bool primary,
    ScrollPhysics physics,//物理滚动,AlwaysScrollableScrollPhysics()让listview在不满一屏时也能滚动
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,//item有效范围
    bool addAutomaticKeepAlives = true,//自动保存视图缓存
    bool addRepaintBoundaries = true,//添加重绘边界
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
    })*/

ListView可以当列表用(相当于Android中的ListView,RecycleView等)也可以当可滑动布局用(相当于Android中的ScrollView)。
ListView使用方式
第一种:当容器,直接在里面放入组件。适合于具有少量子元素的列表视图,会渲染所有的子组件。

body: ListView(
  children: <Widget>[
    Text("ListView的一行数据"),
    Text("ListView的一行数据"),
    Text("ListView的一行数据"),
    Text("ListView的一行数据"),
  ],
),

第二种:ListView.builder方式。适合于具有大量(或无限)子视图的列表视图,因为构建器只对那些实际可见的子视图渲染
1.准备数据

var list = [
  ItemInfo("ListView的一行数据"),
  ItemInfo("ListView的一行数据"),
  ItemInfo("ListView的一行数据"),
  ItemInfo("ListView的一行数据")
];

2.创建item布局

import 'package:flutter/material.dart';
import './../bean/ItemInfo.dart';

// 定义一个回调接口
typedef OnItemClickListener = void Function(int position);

class HomeListItem extends StatelessWidget {

  int position;
  ItemInfo iteminfo;
  OnItemClickListener listener;

  HomeListItem(this.position, this.iteminfo, this.listener);

  @override
  Widget build(BuildContext context) {
    var widget = Column(
      children: <Widget>[
        Container(
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    iteminfo.title,
                    style: TextStyle(
                      fontSize: 15.0,
                      color: Color.fromARGB(255, 51, 51, 51),
                    ),
                  )
                ],
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          ),
          height: 50.0,
          color: Color.fromARGB(255, 241, 241, 241),
          padding: EdgeInsets.only(left: 20.0),
        ),
        //用Container设置分割线
        Container(
          height: 1.0,
          color: Color.fromARGB(255, 230, 230, 230),
        )
        //分割线
//      Divider()
      ],
    );
    //InkWell点击的时候有水波纹效果
    return InkWell(
        onTap: () => listener(position),
        child: widget
    );
  }
}

3.使用ListView

body: ListView.builder(
//设置listview初始滑动距离
controller: ScrollController(
    initialScrollOffset: 350.0,
),
//列表长度
    itemCount: list.length,
//列表item布局
    itemBuilder: (context, position) {
      return HomeListItem(position, list[position], (index) =>
//点击回调
          Navigator.push(
              context,
              new MaterialPageRoute(builder: (BuildContext context) {
                return TextWdigetPage();
              }))
      );
    }),

4.列表刷新,调用setState方法。

setState(() {
  list.add(ItemInfo("ListView的一行数据add"));
}
);

第三种:ListView.separated方式。适用于具有固定数量的子控件的列表视图
这种方式和ListView.builder方式使用方法基本一致,不同的是多了separatorBuilder方法,可以直接设置分割线。

body: ListView.separated(
  itemBuilder: (context, position) {
    return HomeListItem(position, list[position], (index) =>
        Navigator.push(
            context,
            new MaterialPageRoute(builder: (BuildContext context) {
              return TextWdigetPage();
            }))
    );
  },
  // 添加分割线,
  separatorBuilder: (BuildContext context, int index) => new Divider(),
  itemCount: list.length,
),

第四种:ListView.custom方式。提供了定制子模型的其他方面的能力。 例如,SliverChildDelegate可以控制用于估计实际上不可见的孩子的大小的算法。

练习demo,链接https://gitee.com/xgljh/Flutter

相关文章

网友评论

    本文标题:ListView

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