flutter ListView

最简单的表格

ListView

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("布局"),
        ),
        body: MyHomeBody(),
      ),
    );
  }
}

class MyHomeBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BaseListWidget();
  }
}

class BaseListWidget extends StatelessWidget {

  final TextStyle textStyle = TextStyle(fontSize: 20,color: Colors.red);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(10),
          child: Text("人的一切痛苦，本质上都是对自己无能的愤怒。",style: textStyle,),
        ),
        Padding(
          padding: const EdgeInsets.all(0),
          child: Text("人活在世界上，不可以有偏差；而且多少要费点劲儿，才能把自己保持到理性的轨道上",style: textStyle,),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Text("我活在世上，无非想要明白些道理，遇见些有趣的事",style: textStyle,),
        ),
      ],
    );
  }
}

联系人

联系人

class ContactListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.people,size: 30,),
          title: Text("联系人"),
          subtitle: Text("联系人信息"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        ListTile(
          leading: Icon(Icons.email,size: 30,),
          title: Text("邮箱"),
          subtitle: Text("邮箱地址信息 "),
          trailing: Icon(Icons.arrow_forward),
        ),
        ListTile(
          leading: Icon(Icons.message,size: 30,),
          title: Text("消息"),
          subtitle: Text("消息详情"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        ListTile(
          leading: Icon(Icons.map,size: 36,),
          title: Text("地址"),
          subtitle: Text("地址详情信息"),
          trailing: Icon(Icons.arrow_forward),
        )
      ],
    );
  }
}

水平滚动

HorizontalListWidget

class HorizontalListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal,
//      itemExtent: 50,
      children: <Widget>[
        Container(color: Colors.red,width: 100,height: 50,),
        Container(color: Colors.orange,width: 200,),
        Container(color: Colors.yellow,width: 200,),
        Container(color: Colors.green,width: 200,),
        Container(color: Colors.blue,width: 200,),
        Container(color: Colors.blueAccent,width: 200,),
        Container(color: Colors.deepPurple,width: 200,),
      ],
    );
  }
}

ListView.separated

ListView.separated

class SeparatedListWidget extends StatelessWidget {

  Divider blueColor = Divider(color: Colors.blue,);
  Divider redColor = Divider(color: Colors.red,);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: Icon(Icons.people),
                title: Text("联系人${index+1}"),
                subtitle: Text("联系人编号${index+1}"),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return index % 2 == 0 ? redColor : blueColor;
            },
            itemCount: 20
    );
  }
}