Flutter开发（五）—— ListView控件横向展示

Flutter开发（四）—— ListView控件介绍了ListView的简单用法，这里配了一张动态图片，看下ListView横向的效果。手机上跑的效果是非常丝滑的（跟原生没有任何区别），这里使录制14帧/秒（控制图片体积）。

以下代码结构很简单，但是为了证实flutter的View编写也可以分代码，所以进行了简单封装：
1、将整个View代码到了ViewShow中；
2、将ListView代码提到了horizontalList中；
3、将Listview的每个条目提到了ListItem中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ViewShow(),
    );
  }
}

// 展示布局
class ViewShow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
          title: new Text("ListView"),
          backgroundColor: Colors.black45), // Bar 背景设置为灰色
      body: Center(
        child: Container(
          height: 500, //Container的高度  默认就是ListView高度
          child: horizontalList(), //调用ListView
        ),
      ),
    );
  }
}

// 展示ListView
class horizontalList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal, //设置为横向，默认使纵向
      children: <Widget>[
        new ListItem(context,
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1381175915,2452671132&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1486063646,2273285260&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=174198655,918435950&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2970139869,654827709&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=768870055,119193172&fm=200&gp=0.jpg"),
      ],
    );
  }
}

//ListView 的 子item
class ListItem extends StatelessWidget {
  String image_url;
  ListItem(BuildContext mContext, String url) {
    image_url = url;
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size; //获取设备屏幕长宽
    print("--------------$size"); //我的设备宽 360.0  720.0
    final width = size.width;
    final height = size.height;
    // TODO: implement build
    return new Container(
      width: width, //  全屏宽度
      child: Container(
          margin: EdgeInsets.all(10),
          decoration: new BoxDecoration(
              border: Border.all(color: Colors.yellow, width: 3.0), //边框
              borderRadius: new BorderRadius.all(new Radius.circular(20.0)),  //倒圆角
              image: DecorationImage(
                  image: NetworkImage(image_url), fit: BoxFit.cover))), //背景图片、图片展示方式
    );
  }
}