Flutter学习笔记六——ListView Widget（二）横向列表

ListView Widget横向列表

在上一篇Flutter学习笔记五——ListView Widget中认识了ListView Widget的基本使用，默认情况下是竖向列表,这一篇来了解一下横向列表的使用。
其实ListView实现横向列表，只需要添加ScrollDirection属性。

body: Center(
        child: Container(
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Image.network("https://www.qq745.com/uploads/allimg/170416/17-1F4161H131Y9-lp.png"),
              Image.network("http://ww1.sinaimg.cn/thumb180/006am4TEgw1f3x8tq1gqrj31480qo7js.jpg"),
              Image.network("https://www.qq745.com/uploads/allimg/150907/2221003F2-0-lp.jpg"),
              Image.network("http://ww2.sinaimg.cn/thumb180/0066fqovgw1f75tu2nxhfj30ku0dvjtq.jpg"),
              Image.network("http://p5.sinaimg.cn/2782984404/180/14791407463112"),
            ],
          ),
        ),
      ),

效果如图（GIF是用图片生成的，不是很流畅，真机测试很流畅，无卡顿）：

hori.gif

ScrollDirection属性

ListView组件的scrollDirection属性只有两个值，一个是横向滚动，一个是纵向滚动。默认的就是垂直滚动，所以如果是垂直滚动，我们一般都不进行设置。

• Axis.horizontal:横向滚动或者叫水平方向滚动。
• Axis.vertical:纵向滚动或者叫垂直方向滚动。

优化代码简介

上边的代码太多层嵌套，现在把ListView抽取出来，定义一个类来实现。

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        Image.network(
            "https://www.qq745.com/uploads/allimg/170416/17-1F4161H131Y9-lp.png"),
        Image.network(
            "http://ww1.sinaimg.cn/thumb180/006am4TEgw1f3x8tq1gqrj31480qo7js.jpg"),
        Image.network(
            "https://www.qq745.com/uploads/allimg/150907/2221003F2-0-lp.jpg"),
        Image.network(
            "http://ww2.sinaimg.cn/thumb180/0066fqovgw1f75tu2nxhfj30ku0dvjtq.jpg"),
        Image.network("http://p5.sinaimg.cn/2782984404/180/14791407463112"),
      ],
    );
  }
}

然后在在MyAPP类里直接调用MyListView，这样减少了嵌套，增加了代码的阅读性，更加便于维护。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Hello Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text("ListView Widget"),
            backgroundColor: Colors.indigoAccent,
            //标题居中
            centerTitle: true,
          ),
          body: Center(
            child: Container(
              height: 200.0,
              child: MyListView()
            ),
          ),
        ));
  }
}