控件ListView

构造函数

ListView({
    Key key,
    Axis scrollDirection = Axis.vertical,//设置滚动的方向
    bool reverse = false,//是否倒序显示
    ScrollController controller,//用来控制滚动位置及监听滚动事件
    bool primary,//如果内容不足，则用户无法滚动
    ScrollPhysics physics,//它决定可滚动组件如何响应用户操作
    bool shrinkWrap = false,//是否内容适配
    EdgeInsetsGeometry padding,//内间距
    this.itemExtent,//每一个item的高度
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List children = const [],//子控件
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.down,
  })

例子

Widget _buildUI() {
    return ListView(
      scrollDirection: Axis.vertical,
      itemExtent: 60,
      children: List.generate(30, (index) {
        return Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red),
          ),
          child: Text("item${index}"),
        );
      }),
    );
  }

Simulator Screen Shot - iPhone 6s Plus - 2019-10-24 at 13.33.44.png

结合ListTile使用

 ListTile({
    Key key,
    this.leading,// item 前置图标
    this.title,// item 标题
    this.subtitle,// item 副标题
    this.trailing,// item 后置图标
    this.isThreeLine = false,// item 是否三行显示
    this.dense,
    this.contentPadding,// item 内容内边距
    this.enabled = true,
    this.onTap,
    this.onLongPress,
    this.selected = false,
  }) 

例子

Widget _listTile(String title) {
    return ListTile(
      leading: Icon(Icons.list),
      title: Text(title),
      trailing: Icon(Icons.keyboard_arrow_right),
    );
  }

  Widget _listViewListTile() {
    return ListView(
      children: [
        _listTile("one"),
        _listTile("two"),
        _listTile("three"),
      ],
    );
  }

Simulator Screen Shot - iPhone 6s Plus - 2019-10-24 at 13.33.32.png

ListView.builder

 ListView.builder({
    ···
    @required IndexedWidgetBuilder itemBuilder,//Widget
    int itemCount,//列表的数量
     ···
  })

例子

Widget _listViewBuilder(BuildContext context) {
    List indexs = List.generate(50, (index) {
      return index;
    });

    return ListView.builder(
      itemBuilder: (context, index) {
        return Text("${index}");
      },
      itemCount: indexs.length,
      itemExtent: 30,
    );
  }

Simulator Screen Shot - iPhone 6s Plus - 2019-10-24 at 13.33.03.png