Flutter學習筆記（二）

*、assets

當引用圖片的時候，須要在pubspec.yaml的文件中的flutter下添加assets，相似於下面的樣子：

image.png

這裏須要注意的是文件裏的assets只要一個縮進即和flutter裏的內容保持對齊，不然，會出問題。我遇到的是，沒辦法選擇運行設備。

1、Layout原理

Flutter佈局Layout的核心就是Widget。在Flutter裏，基本上任何東西都是Widget，甚至佈局的模型。好比images、icon、text等你能在界面上看到的。你看不到的，如Row、Column等也是Widget。
複雜的Widget都是有單個widget組成的。

下面是幾個經常使用Widget

• Container:
  容器Widget，容許本身定製一些子widget。其初始化以下：

Container({
    Key key,
    this.alignment, this.padding, Color color, Decoration decoration, this.foregroundDecoration, double width, double height, BoxConstraints constraints, this.margin, this.transform, }) 

能夠發現，該UI Widget能夠控制其中的Widget的padding、margin以及當前widget的寬高、border背景色等等。

• Row：
  

  定義一行中的全部Widget和這些Widget的展現方式，包括主軸方向和副軸方向，具體的定義以下，其中MainAxisAlignment表示主軸方向（水平方向），CrossAxisAlignment表示副軸方向（和主軸垂直，即垂直方向）：
  

  row-diagram.png

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
    MainAxisSize mainAxisSize: MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection: VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children: const <Widget>[], }) 

• Column:
  

  定義一列中的全部Widget和這些Widget的展現方式，也有主軸和副軸兩個方向，具體的和Row相同，其定義以下：
  

  column-diagram.png

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
    MainAxisSize mainAxisSize: MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection: VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children: const <Widget>[], }) 

ps：主軸和副軸對於熟悉RN的人應該比較好理解

2、Layout Widget（Container、MaterialApp、Scaffold）

這裏經過一個HelloWorld app來展現如何建立一個Widget並展現出來，並區分Material和非Material環境。
hello_word.dart裏的代碼以下：

class HelloWorld { static Widget helloWorld() { return new MaterialApp( title: 'Hello World', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new Scaffold( appBar: new AppBar(title: new Text('Hello World')), body: new Center( child: new Text( "Hello World", style: new TextStyle(fontSize: 32.0), )), ), ); } static Widget hellWorldWithoutMaterial() { return new Container( decoration: new BoxDecoration(color: Colors.white), child: new Center( child: new Text( 'Hello World', textDirection: TextDirection.ltr, // 這一句必須有 style: new TextStyle(color: Colors.black, fontSize: 40.0), ), ), ); } } 

而在展現上，主要的區別在於非Material下，沒有Appbar、背景色和標題等，全部的內容都須要自定義。

注意⚠️：

一、Scaffold必須放在MaterialApp裏面，不然會報錯，大體以下：

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building Scaffold(dirty, state: ScaffoldState#6f74d): No MediaQuery widget found. Scaffold widgets require a MediaQuery widget ancestor. The specific widget that could not find a MediaQuery ancestor was: Scaffold The ownership chain for the affected widget is: Scaffold ← MyApp ← [root] Typically, the MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. 

二、非Material下Text的textDirection屬性是必須的

??????到底什麼是Material App？

3、在水平和垂直方向上Layout（Row、Column）

一、水平佈局：

class LayoutImagesH { static layoutImagesH() { MaterialApp material = new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text( "Images H Layout", style: new TextStyle(color: Colors.white, fontSize: 20.0), ), ), body: _getLayoutContainer(), ), ); return material; } static _getLayoutContainer() { Row row = new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ _getRowsImage('images/pic1.jpg'), _getRowsImage('images/pic2.jpg'), _getRowsImage('images/pic3.jpg') ], ); Container container = new Container( padding: const EdgeInsets.all(15.0), color: Colors.grey, child: row, ); return container; } static _getRowsImage(imageStr) { return new Image.asset( imageStr, width: 100.0, ); } } 

二、垂直佈局

class LayoutImagesV { static layoutImagesVSpaceEvenly() { return new Container( color: Colors.green, child: new Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Image.asset('images/pic1.jpg'), new Image.asset('images/pic2.jpg'), new Image.asset('images/pic3.jpg'), ], ), ); } static layoutImagesVSpaceAround() { return new Container( color: Colors.green, child: new Column( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Image.asset('images/pic1.jpg'), new Image.asset('images/pic2.jpg'), new Image.asset('images/pic3.jpg'), ], ), ); } static layoutImagesVSpaceBetween() { return new Container( color: Colors.green, child: new Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Image.asset('images/pic1.jpg'), new Image.asset('images/pic2.jpg'), new Image.asset('images/pic3.jpg'), ], ), ); } } 

主軸的枚舉以下：

enum MainAxisAlignment { start, end, center, /// 第一個和最後一個貼邊，中間的平分 spaceBetween, /// 第一個和最後一個距離邊的距離是它與中間的距離的一半 spaceAround, /// 徹底平分 spaceEvenly, } 

4、按比例佈局（Expanded）

使用Expanded Widget，它繼承自Flexible，主要是經過其中flex屬性來控制，默認整個Expanded裏的flex都是1，即平分。咱們能夠經過控制flex來控制每一個Widget所佔的大小。

先來看一個現象：

image.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

邊上黃條是什麼鬼，這裏用的代碼仍是上面提到的水平方向的佈局，代碼裏只是修改了圖片，就變成了這個鬼樣子。

通過嘗試，你會發現，只要總尺寸超過了容器的限制，就會出現這種問題。要解決這種問題，目前來看，一是控制圖片的尺寸，一個就是使用Expanded 的Widget。

代碼以下：

class ExpandedImages { static expandedImages() { return new Container( color: Colors.green, // margin: const EdgeInsets.all(15.0), child: new Row( textDirection: TextDirection.ltr, // mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: _getRowChildren(), ), ); } static expandImagesWithMaterial() { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('Expanded') ), body: new Center( child: new Row( crossAxisAlignment: CrossAxisAlignment.center, children: _getRowChildren(), ), ) ), ); } static _getRowChildren() { return [ // new Expanded(child: new Image.asset("images/pic1.jpg")), // new Expanded(flex:2, child: new Image.asset("images/pic2.jpg")), // new Expanded(child: new Image.asset("images/pic3.jpg")) new Expanded(child: new Image.asset("images/expand1.jpg")), new Expanded(flex:2, child: new Image.asset("images/expand2.jpg")), new Expanded(child: new Image.asset("images/expand3.jpg")) ]; } } 

最後的效果以下圖所示：

image.png

 

 

 

 

 

 

 

 

 

 

 

 

看到這裏其實也明白了，上面的水平方向和垂直方向的佈局是有問題的。

5、壓縮空間

通常的Row和Column的佈局都是儘量大的利用Space，若是此時不想要這些space，那麼可使用相應的mainAxisSize的值來控制，它只有min和max兩個值，默認是max，即咱們看見的那種狀況。若是設置了該值爲min，那麼mainAxisAlignment的後面的幾個值對其再也不起做用。
下面是測試代碼：

class _MyHomePageState extends State<_MyHomePage> { @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar(title: new Text("Packing Widget")), body: new Center( child: new Row( mainAxisAlignment: MainAxisAlignment.spaceAround, mainAxisSize: MainAxisSize.min, // crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Icon(Icons.star, color: Colors.green[500]), new Icon(Icons.star, color: Colors.green[500]), new Icon(Icons.star, color: Colors.green[500]), new Icon(Icons.star, color: Colors.grey), new Icon(Icons.star, color: Colors.grey), ], ), ) ); } } 

6、經常使用的Widget

整體來講，全部的Widget能夠分爲兩類：Standard Widget和Material Component。Standard Widget能夠在Material App和非Material App中使用，可是Material Component只能在Material App中使用。

一、Standard Widget

經常使用的是下面四種：

• Container
  爲Widget添加內邊距padding, 外邊距margins, 邊框borders, 背景色background color和其餘的一些修飾信息。
• GridView
  將其中的Widget按照Grid的形式展現，而且是可滑動的。（彷佛和UICollectionView類似）。
• ListView
  將其中的Widget按照List形式展現，而且是可滑動的。（彷佛和UIScrollView、UITableView類似）。
• Stack
  在Widget上覆蓋一個Widget

二、Material Component

• Card
• ListTitle