*、assets
當(dāng)引用圖片的時(shí)候抑进，需要在pubspec.yaml的文件中的flutter下添加assets强经，類似于下面的樣子：
image.png
這里需要注意的是文件里的assets只要一個(gè)縮進(jìn)即和flutter里的內(nèi)容保持對(duì)齊，否則单匣，會(huì)出問題夕凝。我遇到的是，沒辦法選擇運(yùn)行設(shè)備户秤。
一码秉、Layout原理
Flutter布局Layout的核心就是Widget。在Flutter里鸡号，基本上任何東西都是Widget转砖，甚至布局的模型。比如images鲸伴、icon府蔗、text等你能在界面上看到的。你看不到的汞窗，如Row姓赤、Column等也是Widget。
復(fù)雜的Widget都是有單個(gè)widget組成的仲吏。
下面是幾個(gè)常用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,
})
可以發(fā)現(xiàn)，該UI Widget可以控制其中的Widget的padding誓斥、margin以及當(dāng)前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的展示方式，也有主軸和副軸兩個(gè)方向框仔，具體的和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：主軸和副軸對(duì)于熟悉RN的人應(yīng)該比較好理解
二、Layout Widget（Container存和、MaterialApp、Scaffold）
這里通過一個(gè)HelloWorld app來展示如何創(chuàng)建一個(gè)Widget并展示出來衷旅，并區(qū)分Material和非Material環(huán)境捐腿。
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),
),
),
);
}
}
而在展示上，主要的區(qū)別在于非Material下柿顶，沒有Appbar茄袖、背景色和標(biāo)題等，所有的內(nèi)容都需要自定義嘁锯。
注意??：
1宪祥、Scaffold必須放在MaterialApp里面，否則會(huì)報(bào)錯(cuò)家乘，大致如下：
══╡ 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.
2蝗羊、非Material下Text的textDirection屬性是必須的
??????到底什么是Material App？
三仁锯、在水平和垂直方向上Layout（Row耀找、Column）
1、水平布局：
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,
);
}
}
2业崖、垂直布局
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,
/// 第一個(gè)和最后一個(gè)貼邊野芒，中間的平分
spaceBetween,
/// 第一個(gè)和最后一個(gè)距離邊的距離是它與中間的距離的一半
spaceAround,
/// 完全平分
spaceEvenly,
}
四、按比例布局（Expanded）
使用Expanded Widget双炕，它繼承自Flexible狞悲，主要是通過其中flex屬性來控制，默認(rèn)整個(gè)Expanded里的flex都是1妇斤，即平分摇锋。我們可以通過控制flex來控制每個(gè)Widget所占的大小丹拯。
image.png
邊上黃條是什么鬼，這里用的代碼還是上面提到的水平方向的布局乱投，代碼里只是修改了圖片咽笼，就變成了這個(gè)鬼樣子。
經(jīng)過嘗試戚炫，你會(huì)發(fā)現(xiàn)剑刑，只要總尺寸超過了容器的限制，就會(huì)出現(xiàn)這種問題双肤。要解決這種問題施掏，目前來看，一是控制圖片的尺寸茅糜，一個(gè)就是使用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
看到這里其實(shí)也明白了，上面的水平方向和垂直方向的布局是有問題的蔑赘。
五狸驳、壓縮空間
一般的Row和Column的布局都是盡可能大的利用Space笋熬，如果此時(shí)不想要這些space验毡，那么可以使用相應(yīng)的mainAxisSize的值來控制汁针，它只有min和max兩個(gè)值，默認(rèn)是max，即我們看見的那種情況卓练。如果設(shè)置了該值為min襟企，那么mainAxisAlignment的后面的幾個(gè)值對(duì)其不再起作用。
下面是測(cè)試代碼：
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),
],
),
)
);
}
}
六木羹、常用的Widget
總體來說，所有的Widget可以分為兩類：Standard Widget和Material Component。Standard Widget可以在Material App和非Material App中使用，但是Material Component只能在Material App中使用。
1郊愧、Standard Widget
常用的是下面四種：
- Container
為Widget添加內(nèi)邊距padding, 外邊距margins, 邊框borders, 背景色background color和其他的一些修飾信息眠寿。 - GridView
將其中的Widget按照Grid的形式展示，并且是可滑動(dòng)的。（似乎和UICollectionView相似）。 - ListView
將其中的Widget按照List形式展示壤蚜，并且是可滑動(dòng)的。（似乎和UIScrollView、UITableView相似）蟹漓。 - Stack
在Widget上覆蓋一個(gè)Widget
2份殿、Material Component
- Card
- ListTitle
