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: [
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: [
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: [
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: [
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: [
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: [
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: [
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,
),
],
)