Happy Flutter-StatelessWidget

Dart基本语法学的差不多了以后就可以开始学习Flutter了，就像OC学完了就可以开发iOS一样，触类旁通，Flutter开发需要掌握的基本技能无外乎也是那几个东西，界面布局，网络请求，数据加载，第三方库的使用，学会这些基本可以完成一些简单的Flutter模块的开发了，写文章是为了记录，学习语言最主要的还是得多敲多练，在实战中磨炼才是王道。

初步采用一个demo然后分析其中的一些知识点来慢慢熟悉一些Widget的用法，具体的Widget没有用到的属性就不做展开了，毕竟属性有很多，后面见的多了估计就能举一反三了，这次的demo依然来自于coderwhy大神的文章，我感觉他讲的蛮不错的，在这里可以推荐一下。

StatelessWidget

主要通过一个StatelessWidget的小demo来记录一些知识点，先来张效果图：

StatelessWidget

下面是主要代码：

import 'package:flutter/material.dart';

main(List args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('商品列表')
        ),
        body: MyContent()
      ),
    );
  }
}

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ContentCell("apple1",'第一个',"https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
        SizedBox(
          height: 3,
        ),
        ContentCell("apple2",'第二个',"https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
         SizedBox(
          height: 3,
        ),
        ContentCell("apple3",'第三个',"https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
      ],
    );
  }
}

class ContentCell extends StatelessWidget {
  final title;
  final desc;
  final imageURL;

  ContentCell(this.title, this.desc, this.imageURL);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        border: Border.all(
          width: 5,
          color: Colors.blueGrey
        )
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title,
            style: TextStyle(
              fontSize: 25,
              color: Colors.redAccent,
              fontWeight: FontWeight.bold
            )
          ),
          SizedBox(
            height: 5,
          ),
          Text(desc,
            style: TextStyle(
              fontSize: 15,
              color: Colors.green
            )
          ),
          SizedBox(
            height: 5,
          ),
          Image.network(imageURL)
        ],
      ),
    );
  }
}

整体结构：

这个demo的整体结构是外边一个ListView，里面每一个child都是一个Colum，每一个Colum包含3行，第一行是标题，第二行是副标题，第三行是个图片，然后每个Colum的child都有个边框，标题和副标题之间，Column的每个child之间都有一个间距。

包含的知识点：

1. ListView 列表Widget，children属性接收一个数组，数组里面的元素就是列表要展示的对象，类似UITableView，不过比TableView好用太多太多太多了。

2. Column 垂直布局Widget，和ListView一样也有一个children属性，但和ListView的区别在于Column不能滚动，当子视图超过屏幕范围的时候会出现" RenderFlex overflowed"的警告，大概是长这个样子：

   
   
   overflowed
   
   

   Column可以设置crossAxisAlignment，意思是交叉轴的对齐方式，我这个例子里用 CrossAxisAlignment.start来设置title和subTitle是左对齐，这是一个枚举，可以设置不同的对齐方式，至于交叉轴和主轴的概念后面讲到Flex布局的时候再细讲。

3. Container 容器Widget，padding属性可以传入EdgeInsets.all(5)来设置内边距，decoration属性传入BoxDecoration设置边框，类似于UIView的感觉，不过这是一个加强版的UIView。

4. SizeBox，设置间距Widget，width和height可以设置间距的宽度和高度。

5. Image.network(imageURL)，这个是Flutter为开发者提供的一个可以自带网络下载图片功能的Image，是不是比iOS加载一个网络图片又方便了太多太多太多了。

6. Text，展示文字Widget，在计数器案例中已经见过了，类似于一个加强版的UILabel，通过style来设置文字的样式。

参考资料：
Flutter教程