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