ListView的构造方法

通过集合的方式构建

class ListViewWidgetOne extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ListViewState();
  }
}

class ListViewState extends State<ListViewWidgetOne> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(8.0),
      children: <Widget>[
        Container(
          color: Colors.amber[200],
          height: 50,
          child: Center(
            child: Text("TestA"),
          ),
        ),
        Container(
          color: Colors.amber[300],
          height: 50,
          child: Center(
            child: Text("TestB"),
          ),
        ),
        Container(
          child: Center(
            child: Text("TestC"),
          ),
          color: Colors.amber[400],
          height: 50,
        )
      ],
    );
  }
}

通过ListView.build()构建

class ListViewWidgetTwo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ListViewStateTwo();
  }
}

class ListViewStateTwo extends State<ListViewWidgetTwo> {
  final datas = ['A', 'B', "C"];
  final colorsData = [200, 400, 600];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: datas.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.only(bottom: 1),
            height: 50,
            child: Center(
              child: Text(datas[index]),
            ),
            color: Colors.amber[colorsData[index]],
          );
        });
  }
}

通过ListView.separated()构建

class ListViewWidgetThree extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ListViewStateThree();
  }
}

class ListViewStateThree extends State<ListViewWidgetThree> {
  final datas = ['AAA', 'BBB', "CCC"];
  final colorsData = [200, 400, 600];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
        itemBuilder: (context, index) {
          return Container(
            height: 50,
            color: Colors.amber[colorsData[index]],
            child: Center(
              child: Text(datas[index]),
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) => const Divider(height: 1,),
        itemCount: datas.length);
  }
}

通过ListView.separated()构建的有分割线。