Flutter widgets——Container/Row/Column/Image

俗話說知己知彼百戰百勝，Flutter裏面一切都是Widget來組裝而成的。 若是對Flutter 裏面的各類Widgets不瞭解，那你就別想將它們組合成你想要的效果。從今天開始。會把一個一個的widget 擼一遍。。知道它大概的用法/效果。當你想作某個效果的時候。腦殼裏面才能第一時間想到它。

FlutterCandies QQ羣:181398081

Sample Code

Container

做爲最經常使用的內容widget,margin,padding, color(background),width,height,children 這些屬性很好理解。

new Container(
          margin: const EdgeInsets.all(10.0),
          color: const Color(0xFF00FF00),
          width: 48.0,
          height: 48.0,
          child: new Text("Hello Flutter"),
          padding:  const EdgeInsets.only(left: 6.0),
        );
複製代碼

constraints 對Container大小的約束。他會結合width,height進行處理 foregroundDecoration 一個前置的裝飾器。哈哈把個人Text 擋住了。 transform 變形

new Container(
          constraints: new BoxConstraints.expand(
            height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
          ),
          padding: const EdgeInsets.all(8.0),
          color: Colors.teal.shade700,
          alignment: Alignment.center,
          child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
          foregroundDecoration: new BoxDecoration(
            image: new DecorationImage(
              image: new NetworkImage('http://p0.so.qhimgs1.com/bdr/200_200_/t011fa0ccaa6d22240c.jpg'),
              centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
            ),
          ),
          transform: new Matrix4.rotationZ(0.1),
        );
複製代碼

Row和Column

經常使用的多內容Widget，能夠將Child 按照水平/垂直的方式（跟UWP裏面設計思惟的徹底相反。。哈哈哈好尷尬）佈局，它們都繼承於Flex.

Row和Column差異是設置了不一樣的flex-direction.

Flex經過direction設置了flex的主軸方向即main axis。和主軸垂直的方向叫作cross axis。flex佈局中對子佈局的控制是從main axis 和cross axis兩個方向上進行的. 下面是一圖流解釋

Image

FadeInImage

默認是這幾種方式。支持GIF格式，若是你想寫一個緩存本地硬盤的Image。你能夠重寫ImageProvider.這裏推薦一下插件flutter_advanced_networkimage

對於默認的Image是有作內存緩存，默認是1000.

const int _kDefaultSize = 1000;
const int _kDefaultSizeBytes = 100 << 20; // 100 MiB//清除
PaintingBinding.instance.imageCache.clear();
//緩存張數
PaintingBinding.instance.imageCache.maximumSize=500;
//緩存大小
PaintingBinding.instance.imageCache.maximumSizeBytes=1000;
複製代碼

另外Image有個重要的屬性就是Fit，至關於UWP裏面的Stretch

在實際應用中，這4個widget使用的頻率是至關高的，知道它的每種用法是很是有必要的，感興趣的童鞋快去試試吧

Sample Code