Basic控件預覽

Container

是一個包含性質的容器，結合了回話 位置擺放 和 放置可伸展控件的控件

   
   new Center(
     child: new Container(
        margin: const EdgeInsets.all(10.0),
       color: const Color(0xFF00FF00),
        width: 48.0,
       height: 48.0,
       ),
   )

Row

將內部控件水平擺放的控件

new Row(
 children: <Widget>[
   new Expanded(
     child: new Text('Deliver features faster', textAlign: TextAlign.center),
   ),
   new Expanded(
     child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
   ),
   new Expanded(
     child: new FittedBox(
       fit: BoxFit.contain, // otherwise the logo will be tiny
       child: const FlutterLogo(),
     ),
   ),
 ],
)
注意事項：
當非彈性內容加起來超出row的寬度時，會提示overflowed。當沒有剩余空間擺放Expaned和Flexible控件的是，會給出黃色描邊提醒

實例：

new Row(
 children: <Widget>[
   const FlutterLogo(),
   const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
   const Icon(Icons.sentiment_very_satisfied),
 ],
)

減去logo圖片和Icon的位置之后，剩余空間是Text控件的，但是不知道具體有多少可利用的空間，計算之后，oh， no空間不夠了That's not fair, now I have no more room available for my other children!于是給出黃色描邊的提醒

改進：

new Row(
  children: <Widget>[
    const FlutterLogo(),
    const Expanded(
      child: const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
    ),
    const Icon(Icons.sentiment_very_satisfied),
  ],
)

思路：1.擺放logo icon， 然后剩余空間給了 Expanded
2. Expande計算自身內部的控件擺放

Column

將內部控件垂直擺放的控件

new Column(
  children: <Widget>[
    new Text('Deliver features faster'),
    new Text('Craft beautiful UIs'),
    new Expanded(
      child: new FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

對于Column來說會涉及到主軸和副軸，來決定控件在水平方向打擺放和垂直空間的擴展方式默認 the crossAxisAlignment is set to CrossAxisAlignment.start
于是上面的等價與：

new Column(
crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new Text('Deliver features faster'),
    new Text('Craft beautiful UIs'),
    new Expanded(
      child: new FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

案例：

new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new Text('We move under cover and we move as one'),
    new Text('Through the night, we have one shot to live another day'),
    new Text('We cannot let a stray gunshot give us away'),
    new Text('We will fight up close, seize the moment and stay in it'),
    new Text('It’s either that or meet the business end of a bayonet'),
    new Text('The code word is ‘Rochambeau,’ dig me?'),
    new Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
  ],
)

When a Column has one or more Expanded or Flexible children, and is placed in another Column, or in a ListView, or in some other context that does not provide a maximum height constraint for the Column, you will get an exception at runtime saying that there are children with non-zero flex but the vertical constraints are unbounded.
The key to solving this problem is usually to determine why the Column is receiving unbounded vertical constraints.

One common reason for this to happen is that the Column has been placed in another Column (without using Expanded or Flexible around the inner nested Column). When a Column lays out its non-flex children (those that have neither Expanded or Flexible around them), it gives them unbounded constraints so that they can determine their own dimensions (passing unbounded constraints usually signals to the child that it should shrink-wrap its contents). The solution in this case is typically to just wrap the inner column in an Expanded to indicate that it should take the remaining space of the outer column, rather than being allowed to take any amount of room it desires.

關鍵點：千言萬語就是---使用Expanded來包含一下，尤其是Column嵌套Column時，內部的需要一個Expanded或者Flex來包含Column

Column inside ListView or another vertical scrollable

Another reason for this message to be displayed is nesting a Column inside a ListView or other vertical scrollable. In that scenario, there really is infinite vertical space (the whole point of a vertical scrolling list is to allow infinite space vertically). In such scenarios, it is usually worth examining why the inner Column should have an Expanded or Flexible child: what size should the inner children really be?The solution in this case is typically to remove the Expanded or Flexible widgets from around the inner children.

對于Column放置到垂直布局中【ListView】則需要移除內部的Expanded和Flex控件

Text

單一文本展示控件

new Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(fontWeight: FontWeight.bold),
)

使用GestureDetector widget with a GestureDetector.onTap handler 可以是Text響應事件操作

AppBar

new AppBar(
  title: new Text('My Fancy Dress'),
  actions: <Widget>[
    new IconButton(
      icon: new Icon(Icons.playlist_play),
      tooltip: 'Air it',
      onPressed: _airDress,
    ),
    new IconButton(
      icon: new Icon(Icons.playlist_add),
      tooltip: 'Restitch it',
      onPressed: _restitchDress,
    ),
    new IconButton(
      icon: new Icon(Icons.playlist_add_check),
      tooltip: 'Repair it',
      onPressed: _repairDress,
    ),
  ],
)