Flutter 零基础学习初探（四）

上一篇我们代码里有个SizeBox属性，我们可以用去代替，这样写的代码可扩展性更全更强，因为它都包含，布局神器。

  //控件相互距离
//        SizedBox(height: 10),
      Container(height: 10,),

这里有两个常用小Tips:
（1）当我们项目文件多的时候，我们访问了其中一个如果再想回来的话有个快捷键：command + (回去),command + 。
（2）快速打开项目文件：command +shift+o

针对main.dart里面的代码是不是看着太多了，那我们直接把：

class Home extends StatelessWidget {

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('FlutterDemo'),
    ),
    body: ListViewDemo(),
  );
}
}

把body里面需要展示的Cell单独拿出来，新建一个类listview_demo.dart

import 'package:flutter/material.dart';
import 'Car.dart';
class ListViewDemo extends StatelessWidget {

  Widget _cellForRow(BuildContext context,int index)
  {
//    return Text('123');
//首先里面一定需要写布局
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(10),
      //布局的是每一个Car Model需要显示的内容
      child:Column(
        children: <Widget>[
          Image.network(datas[index].imageUrl,),

          //控件相互距离
//        SizedBox(height: 10),
          Container(height: 10,),
          Text(datas[index].name,
            style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.w800,
                fontStyle: FontStyle.values[1]
            ),
          ),
          SizedBox(height: 20,)
        ],

      ),


    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: datas.length,
        itemBuilder: _cellForRow);
  }
}

这样通过抽出来自定义cell来展示我们的内容，效果跟之前是一样的。记得导入头文件哦！！！