Dart基本語法學(xué)的差不多了以后就可以開始學(xué)習(xí)Flutter了，就像OC學(xué)完了就可以開發(fā)iOS一樣，觸類旁通，F(xiàn)lutter開發(fā)需要掌握的基本技能無外乎也是那幾個東西，界面布局，網(wǎng)絡(luò)請求，數(shù)據(jù)加載，第三方庫的使用，學(xué)會這些基本可以完成一些簡單的Flutter模塊的開發(fā)了，寫文章是為了記錄，學(xué)習(xí)語言最主要的還是得多敲多練，在實戰(zhàn)中磨煉才是王道。

初步采用一個demo然后分析其中的一些知識點來慢慢熟悉一些Widget的用法，具體的Widget沒有用到的屬性就不做展開了，畢竟屬性有很多，后面見的多了估計就能舉一反三了，這次的demo依然來自于coderwhy大神的文章，我感覺他講的蠻不錯的，在這里可以推薦一下。

StatelessWidget

主要通過一個StatelessWidget的小demo來記錄一些知識點，先來張效果圖：

StatelessWidget

下面是主要代碼：

import 'package:flutter/material.dart';

main(List<String> 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)
        ],
      ),
    );
  }
}

整體結(jié)構(gòu)：

這個demo的整體結(jié)構(gòu)是外邊一個ListView，里面每一個child都是一個Colum，每一個Colum包含3行，第一行是標(biāo)題，第二行是副標(biāo)題，第三行是個圖片，然后每個Colum的child都有個邊框，標(biāo)題和副標(biāo)題之間，Column的每個child之間都有一個間距。

包含的知識點：

1. ListView 列表Widget，children屬性接收一個數(shù)組，數(shù)組里面的元素就是列表要展示的對象，類似UITableView，不過比TableView好用太多太多太多了。

2. Column 垂直布局Widget，和ListView一樣也有一個children屬性，但和ListView的區(qū)別在于Column不能滾動，當(dāng)子視圖超過屏幕范圍的時候會出現(xiàn)" RenderFlex overflowed"的警告，大概是長這個樣子：

   
   
   overflowed
   
   

   Column可以設(shè)置crossAxisAlignment，意思是交叉軸的對齊方式，我這個例子里用 CrossAxisAlignment.start來設(shè)置title和subTitle是左對齊，這是一個枚舉，可以設(shè)置不同的對齊方式，至于交叉軸和主軸的概念后面講到Flex布局的時候再細(xì)講。

3. Container 容器Widget，padding屬性可以傳入EdgeInsets.all(5)來設(shè)置內(nèi)邊距，decoration屬性傳入BoxDecoration設(shè)置邊框，類似于UIView的感覺，不過這是一個加強(qiáng)版的UIView。

4. SizeBox，設(shè)置間距Widget，width和height可以設(shè)置間距的寬度和高度。

5. Image.network(imageURL)，這個是Flutter為開發(fā)者提供的一個可以自帶網(wǎng)絡(luò)下載圖片功能的Image，是不是比iOS加載一個網(wǎng)絡(luò)圖片又方便了太多太多太多了。

6. Text，展示文字Widget，在計數(shù)器案例中已經(jīng)見過了，類似于一個加強(qiáng)版的UILabel，通過style來設(shè)置文字的樣式。

參考資料：
Flutter教程