前言
1、Flutter是Google使用Dart語(yǔ)言開(kāi)發(fā)的移動(dòng)應(yīng)用開(kāi)發(fā)框架薛训，使用一套Dart代碼就能構(gòu)建高性能媒吗、高保真的iOS和Android應(yīng)用程序，并且在排版乙埃、圖標(biāo)闸英、滾動(dòng)、點(diǎn)擊等方面降低差異介袜。
2甫何、Flutter不是黑科技，應(yīng)用程序的代碼總是以一種非常合理遇伞，可以解釋的方式的運(yùn)行著辙喂，只是需要去了解而已。Flutter能夠在iOS和Android上運(yùn)行起來(lái)鸠珠，依靠的是一個(gè)叫Flutter Engine的虛擬機(jī)巍耗，F(xiàn)lutter Engine是Flutter應(yīng)用程序的運(yùn)行環(huán)境，開(kāi)發(fā)人員可以通過(guò)Flutter框架和API在內(nèi)部進(jìn)行交互
3渐排、Flutter的優(yōu)勢(shì)（1）高效率 用一套代碼庫(kù)就能開(kāi)發(fā)iOS和Android應(yīng)用;使用新型的芍锦、表現(xiàn)力強(qiáng)的語(yǔ)言和聲明式的方法，用更少的代碼來(lái)做更多的事情;開(kāi)發(fā)調(diào)試更容易方便 ,可以在應(yīng)用程序運(yùn)行時(shí)更改代碼并重新加載查看效果飞盆，也就是熱重新加載
（2）創(chuàng)建美觀(guān)、高度定制的用戶(hù)體驗(yàn) ,Flutter框架內(nèi)置了一組豐富的質(zhì)感設(shè)計(jì)控件
內(nèi)容
一次乓、全世界的第一個(gè)簡(jiǎn)單的輸出小李子：
import 'package:flutter/material.dart';
void main() {
runApp(new Center(child: new Text('你好吓歇，靈機(jī)！', textDirection: TextDirection.ltr)));
}
二票腰、基礎(chǔ)控件：
<一>城看、簡(jiǎn)單控件：
- Text控件即容器，是一個(gè)常用的控件杏慰，下面的實(shí)例有7個(gè)不同樣式的文本控件
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('文本控件'),
),
body: new Column(
children: <Widget>[
new Text(
'紅色+黑色刪除線(xiàn)+25號(hào)',
style: new TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 25.0,
),
),
new Text(
'橙色+下劃線(xiàn)+24號(hào)',
style: new TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
fontSize: 24.0,
),
),
new Text(
'虛線(xiàn)上劃線(xiàn)+23號(hào)+傾斜',
style: new TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 23.0,
fontStyle: FontStyle.italic,
),
),
new Text(
'serif字體+24號(hào)',
style: new TextStyle(
fontFamily: 'serif',
fontSize: 26.0,
),
),
new Text(
'monospace字體+24號(hào)+加粗',
style: new TextStyle(
fontFamily: 'monospace',
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
new Text(
'天藍(lán)色+25號(hào)+2行跨度',
style: new TextStyle(
color: const Color(0xff4a86e8),
fontSize: 25.0,
height: 2.0,
),
),
new Text(
'24號(hào)+2個(gè)字母間隔',
style: new TextStyle(
fontSize: 24.0,
letterSpacing: 2.0,
),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ContainerDemo(),
),
);
}
- Image控件即圖片控件测柠，是顯示圖像的控件，Image控件有多種構(gòu)造函數(shù)：
(1) new Image缘滥，用于從ImageProvider獲取圖像轰胁。
(2) new Image.asset，用于使用key從AssetBundle獲取圖像朝扼。
(3) new Image.network赃阀，用于從URL地址獲取圖像。
(4) new Image.file擎颖，用于從File獲取圖像榛斯。
下面是一個(gè)從URL地址獲取圖像的實(shí)例观游，并通過(guò)scale屬性設(shè)置縮放比例：
import 'package:flutter/material.dart';
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('從URL地址獲取圖像'),
),
body: new Center(
child: new Image.network(
'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg',
scale: 2.0,
),
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ImageDemo(),
),
);
}
下面是一個(gè)從本地文件目錄中獲取圖像的實(shí)例：
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('從本地獲取圖像'),
),
body: new Center(
child: new Container(
decoration: new BoxDecoration(
backgroundImage: new BackgroundImage(
image: new AssetImage('images/flutter.jpeg'),
),
)
)
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ImageDemo(),
),
);
}
<二>內(nèi)容布局：
1.水平布局
Row控件即水平布局控件，能夠?qū)⒆涌丶脚帕?/p>
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body: new Row(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('點(diǎn)擊紅色按鈕事件');
},
color: const Color(0xffcc0000),
child: new Text('紅色按鈕'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('點(diǎn)擊黃色按鈕事件');
},
color: const Color(0xfff1c232),
child: new Text('黃色按鈕'),
),
),
new RaisedButton(
onPressed: () {
print('點(diǎn)擊粉色按鈕事件');
},
color: const Color(0xffea9999),
child: new Text('粉色按鈕'),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
2.垂直布局
Column控件即垂直布局控件，能夠?qū)⒆涌丶怪迸帕?/p>
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('垂直方向布局'),
),
body: new Column(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('點(diǎn)擊紅色按鈕事件');
},
color: const Color(0xffcc0000),
child: new Text('紅色按鈕'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('點(diǎn)擊黃色按鈕事件');
},
color: const Color(0xfff1c232),
child: new Text('黃色按鈕'),
),
),
new RaisedButton(
onPressed: () {
print('點(diǎn)擊粉色按鈕事件');
},
color: const Color(0xffea9999),
child: new Text('粉色按鈕'),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
3.Stack即層疊布局控件，能夠?qū)⒆涌丶盈B排列
Stack控件的每一個(gè)子控件都是定位或不定位舌厨，定位的子控件是被Positioned控件包裹的山林。Stack控件本身包含所有不定位的子控件，其根據(jù)alignment定位（默認(rèn)為左上角）茵宪。然后根據(jù)定位的子控件的top、right、bottom和left屬性將它們放置在Stack控件上拌屏。
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('層疊定位布局'),
),
body:new Center(
child: new Stack(
children: <Widget>[
new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
new Positioned(
left: 35.0,
right: 35.0,
top: 45.0,
child: new Text(
'Whatever is worth doing is worth doing well. ???.???',
style: new TextStyle(
fontSize: 20.0,
fontFamily: 'serif',
),
),
),
]
),
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
4.Container控件即容器，是一個(gè)常用的控件术荤，基礎(chǔ)容器的實(shí)例
import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
width: 128.0,
height: 128.0,
decoration: new BoxDecoration(
color: Colors.lightBlueAccent[100],
),
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ContainerDemo(),
),
);
}
