Flutter 零基础学习初探（三）

2019-07-01 本文已影响0人益达哥

制作一个简单的 $\color{#FF0000}{ListView}$ 列表视图：
首先我们在工程目录下的lib文件夹下建立一个Model文件夹，Model文件夹里面增加一个Car类。这里有个小Tips分享：当我们需要创建一个文件夹时，同时按commant + N 键。第一步是选择Package->Model 第二步选择Dart File->Car.

屏幕快照 2019-07-01 下午2.58.53.png

屏幕快照 2019-07-01 下午2.57.19.png

以上两个步骤我们做完了以后，首先定义Car模型,里面包含了模型数组后面会用到：

class Car{
  //属性调用 创建一个构造函数
  const Car({
    //注意这里是用,不是; 用this代表可选类型
    this.name,
    this.imageUrl

  });

  final String name;
  final String imageUrl;
}
//模型数组
final List<Car> datas = [

  Car(
    name: '保时捷918 Spyder',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '兰博基尼Aventador',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '法拉利Enzo',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: 'Zenvo ST1',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '迈凯伦F1',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '萨林S7',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '科尼赛克CCR',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '布加迪Chiron',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '轩尼诗Venom GT',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '西贝尔Tuatara',
    imageUrl:
    'https://img.haomeiwen.com/i2990730/3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )


];

现在进入正题，首先我们创建一个简单的ListView，回到主工程中去:

void main() => runApp(App());
//一个Widget就是一个类
class MyWidget extends StatelessWidget{
  //渲染界面 build
  @override
//自定义属性 字体颜色 字号 字体加粗呀
  final _textStyle = TextStyle(color: Colors.red,
    fontSize: 40,
  fontWeight: FontWeight.bold);
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'Hello Flutter',textDirection: TextDirection.ltr,
        style: _textStyle,
      ),
    );
  }


}

//定义一个类方法 （简便写法直接stl就会出现快速构建）
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //理解为视图控制器容器
    return MaterialApp(
      //home属性 带导航条
//      home:Scaffold(
//        //熟悉的感觉（navgationBar）
//        appBar: AppBar(
//          title: Text('Flutter demo'),
//        ),
//        body: MyWidget(),
//      ) ,
    home: Home(),
      //修改导航条颜色
      theme: ThemeData(
        primaryColor: Colors.red
      ),
    );
  }
}


//自定义一个Home类
class Home extends StatelessWidget {
//第二步
  //带_是私有的属性 自己自定义一个方法
  Widget _cellForRow(BuildContext context,int index)
  {
    return Text('123');
  }
//第一步
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterDemo'),
      ),
      body: ListView.builder(
        //cell count
        itemCount: datas.length,
        //可以理解为代理方法，通过回调的方式，实现cellForRow的私有方法，这里需要说明下Flutter语言是没有section的，也就是没有组这个概念，需要自己去创建
        itemBuilder: _cellForRow,
      ),
    );
  }
}

这里说两个Tips:
（1）itemBuilder: _cellForRow,
可以理解为通过回调的方式实现代理方法，实现cellForRow的私有方法。
（2）Flutter语言是没有section的，也就是没有组这个概念，需要自己去创建。

以上就会展示出一个超级简单的ListView:

屏幕快照 2019-07-01 下午3.51.55.png

下面我们开始正式布局我们的ListView，在此之前需要说下在Flutter开发中需要用到的非常重要的小部件： $\color{#FF0000}{Container}$ ，可以这么理解这个小部件：
前端开发来说相当于div（flexbox进行布局）
移动端相当于一个UIView（AutoLayerout布局），所以这个小部件是非常重要的。修改我们的_cellForRow方法：

 Widget _cellForRow(BuildContext context,int index)
  {
//    return Text('123');
//首先里面一定需要写布局
  return Container(
    color: Colors.white,
    margin: EdgeInsets.all(10),
    child: Image.network(datas[index].imageUrl),
     );
  }

运行结果如下：

屏幕快照 2019-07-01 下午4.16.59.png

那假如我们需要对图片进行描述呢，那这就需要引入一个布局属性： $\color{#FF0000}{Column}$ ，纵向布局（对应的还有个布局就是横向布局 $\color{#FF0000}{Row}$ ，还有个层级布局 $\color{#FF0000}{Stack}$ ）里面放的是需要展示的一些控件了；


class Home 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),
        Text(datas[index].name,
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w800,
            fontStyle: FontStyle.values[1]
          ),
        ),
        SizedBox(height: 20,)
      ],
      
    ),
   

  );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterDemo'),
      ),
      body: ListView.builder(
        //cell count
        itemCount: datas.length,
        //可以理解为代理方法，通过回调的方式，实现cellForRow的私有方法，这里需要说明下Flutter语言是没有section的，也就是没有组这个概念，需要自己去创建
        itemBuilder: _cellForRow,
      ),
    );
  }
}

其实Flutter这门语言很高级的，小轮子完全可以根据自己需求很方便的去造，比如现在的image没有宽，高这个属性的话那么我们可以这么写：

 Container(
          child: Image.network(datas[index].imageUrl,),
          width: 100,height: 100,
        ),

Flutter 零基础学习初探（三）

猜你喜欢

热点阅读