版權(quán)聲明：本文為作者原創(chuàng)書籍容诬。轉(zhuǎn)載請(qǐng)注明作者和出處娩梨，未經(jīng)授權(quán)，嚴(yán)禁私自轉(zhuǎn)載览徒，侵權(quán)必究１范ā！吱殉！
情感語錄：歡樂就是堅(jiān)強(qiáng)的發(fā)條掸冤，使永恒的自然循環(huán)不息。在世界的大鐘里面友雳，歡樂是推動(dòng)齒輪的動(dòng)力
大家好稿湿，歡迎來到Flutter專欄。你可能不會(huì)移動(dòng)端開發(fā)押赊，無論會(huì)與不會(huì)都沒關(guān)系饺藤，F(xiàn)lutter專欄將帶你走進(jìn)雙移動(dòng)端的領(lǐng)域包斑。或許你兩端原生開發(fā)都會(huì)涕俗，也會(huì)面對(duì)寫兩套原生代碼的問題罗丰，就算能力足夠，可能留給你的時(shí)間也不夠再姑。能不能一套代碼多平臺(tái)使用呢萌抵？當(dāng)然可以啦！元镀！ Google 公司的一偉大創(chuàng)舉Flutter就誕生了绍填，F(xiàn)lutter當(dāng)前正火，在短短的時(shí)間內(nèi)可以說是步步逼近 React Native栖疑，雖然在學(xué)習(xí)成本上 Flutter 遠(yuǎn)高 RN（當(dāng)然看你目前是否掌握相應(yīng)的語言基礎(chǔ)）讨永，但在性能上是略勝一籌，它和原生基本無異遇革。Flutter是以后的一個(gè)發(fā)展方向卿闹，為了更好的擁抱未來，所以學(xué)習(xí)Flutter很有必要萝快，要學(xué)好Flutter你得先掌握Dart語言锻霎，如果你沒有Dart語言基礎(chǔ)請(qǐng)先觀看我上期內(nèi)容： 戳這里?《 Flutter大戰(zhàn)前夜之Dart語言（上）》； 《Flutter大戰(zhàn)前夜之Dart語言（下）》) 兩篇文章帶你輕松入門 Dart 語言基礎(chǔ)杠巡。
本章簡要：
1量窘、Center 居中容器組件
2、Text 文本組件
3氢拥、Container 容器組件
4蚌铜、MaterialApp 和 Scaffold 主題組件
5、簡單的自定組件Widget
有關(guān)Flutter在 Windows 和 Mac 平臺(tái)的環(huán)境搭建介紹：
英文版地址：https://flutter.dev/docs/get-started/install
一嫩海、Flutter 目錄結(jié)構(gòu)介紹
使用你的IDE創(chuàng)建一個(gè)Flutter默認(rèn)工程冬殃，我這里使用的Android Studio，其他開發(fā)工具也是一樣叁怪，結(jié)構(gòu)如下审葬。
我們著重需要注意一下幾個(gè)文件夾,其他的暫時(shí)不用理會(huì)
文件夾 作用
android android 平臺(tái)相關(guān)代碼
ios ios 平臺(tái)相關(guān)代碼
lib flutter 相關(guān)代碼，主要編寫的代碼就在這個(gè)文件夾
test 用于存放測試代碼
pubspec.yaml 配置文件奕谭，一般存放一些第三方庫的依賴涣觉。
【溫馨小貼士】 Flutter程序是可以支持 Android 的一級(jí)語言Kotlin 和 IOS 的Swift語言，如果需要原生語言的支持請(qǐng)?jiān)趧?chuàng)建項(xiàng)目的時(shí)候進(jìn)行勾選配置血柳。
默認(rèn)工程代碼官册，去掉注釋大致如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
從上面demo代碼來看，可能有點(diǎn)懵难捌，看不懂沒關(guān)系膝宁，下面分別一點(diǎn)點(diǎn)來介紹鸦难。
二、Flutter 入口文件员淫、入口方法
每一個(gè) flutter 項(xiàng)目的 lib 目錄里面都有一個(gè) main.dart 文合蔽； 它就是 flutter 的入口文件
void main(){
runApp(MyApp());
}
//也可以簡寫
void main()=>runApp(MyApp());
其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法介返。MyApp 是自定義的一個(gè)組件,關(guān)鍵字 new 可以不寫拴事，寫成 new MyApp()也沒有錯(cuò)，在開發(fā)中常常不寫映皆，當(dāng)然這也看你個(gè)人習(xí)慣挤聘。
三、組件
Flutter的視圖都是通過組件繪制的捅彻，沒有像Android 原生開發(fā)中那樣可以通過xml文件進(jìn)行視圖繪制，習(xí)慣了Android 開發(fā)的同學(xué)對(duì)于這點(diǎn)來說可能很難適應(yīng)鞍陨。
1步淹、Center組件：
你可以看著是一個(gè)窗口視圖，或者說就是當(dāng)前屏幕,當(dāng)然這是取決于父容器的作用范圍诚撵，和自身的大小缭裆，該組件顧名思義就是將子組件放置在自己的中心位置。
2寿烟、Text組件：
這就是一個(gè)文本組件澈驼，用于顯示文本信息，在Android原生中它相當(dāng)于充當(dāng)TextView控件一樣的效果筛武。
下面我們來看一個(gè)例子：
import 'package:flutter/material.dart';
void main(){
runApp(Center( child: Text(
"我是一個(gè)文本內(nèi)容", textDirection: TextDirection.ltr, //讓文字從左向右流動(dòng)
),
));
}
效果如下：
此時(shí)的Center組件你可以看做就是整個(gè)屏幕缝其，而屏幕中間放了一個(gè)文本組件Text來顯示我們的內(nèi)容。
3徘六、自定義組件：
自定義組件如同原生開發(fā)中一樣繼承View或者ViewGroup類去實(shí)現(xiàn)你自己想要的界面内边，在 Flutter 中自定義組件其實(shí)也是一個(gè)類，這個(gè)類需要繼承 StatelessWidget 或 StatefulWidget待锈。 前期我們都繼承 StatelessWidget漠其。后面會(huì)講到StatefulWidget 的使用。
【StatelessWidget 與 StatefulWidget 二者大致區(qū)分】：
StatelessWidget 是無狀態(tài)組件竿音，狀態(tài)不可變的 widget
StatefulWidget 是有狀態(tài)組件和屎，持有的狀態(tài)可能在 widget 生命周期改變
下面我們來簡化下runApp 并給Text組件加點(diǎn)樣式
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"中文，是世界上最美的語言",
textDirection: TextDirection.ltr, //讓文字從左向右流動(dòng)
//添加樣式
style: TextStyle(
fontSize: 40.0, //設(shè)置40號(hào)字體
fontWeight: FontWeight.bold, //加粗
//設(shè)置字體顏色的三種方式
// color: Colors.yellow
//color: Color.fromRGBO(255, 222, 222, 0.5)
color:Color.fromARGB(22, 255, 118, 18)
),
),
);
}
}
運(yùn)行起來屏幕會(huì)上顯示我們添加了點(diǎn)文字效果春瞬。需要注意的是Flutter中的這些樣式都是通過命名函數(shù)進(jìn)行配置的柴信，在寫的時(shí)候,一定的和函數(shù)中的名稱一致，不然會(huì)報(bào)錯(cuò)快鱼。
4颠印、MaterialApp 和 Scaffold 組件
① 纲岭、MaterialApp組件
MaterialApp 是一個(gè)方便的 Widget，它封裝了應(yīng)用程序?qū)崿F(xiàn) Material Design 所需要的一些 Widget线罕。一般作為頂層 widget 使用止潮，常用屬性如下：
home（主頁）
title（標(biāo)題）
color（顏色）
theme（主題）
routes（路由）
②、Scaffold
Scaffold 是 Material Design 布局結(jié)構(gòu)的基本實(shí)現(xiàn)钞楼。此類提供了用于顯示 drawer喇闸、snackbar 和底部 sheet 的 API。
Scaffold 有下面幾個(gè)主要屬性：
appBar - 顯示在界面頂部的一個(gè) AppBar询件。
body - 當(dāng)前界面所顯示的主要內(nèi)容 Widget燃乍。
drawer - 抽屜菜單控件。
從上面的實(shí)例呆萌來看一點(diǎn)都不美觀宛琅，這里介紹了MaterialApp 和 Scaffold 兩個(gè)組件刻蟹，我們可以輕松實(shí)現(xiàn)像Android 原生開發(fā)中帶有一個(gè)主題和ActionBar的樣式，當(dāng)然這兩個(gè)組件的用法不止下面這么簡單嘿辟，更多的使用會(huì)在后面的章節(jié)實(shí)戰(zhàn)中慢慢拓展舆瘪。
import 'package:flutter/material.dart';
//dart程序入口
void main(){
//flutter 程序入口
runApp(MyApp());
}
//自定義組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
//設(shè)置標(biāo)題欄
appBar:AppBar(
title:Text('呆萌')
),
//設(shè)置內(nèi)容區(qū)域
body:Content(),
),
//設(shè)置主題色
theme: ThemeData(
primarySwatch: Colors.yellow
),
);
}
}
//自定義的內(nèi)容
class Content extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Text(
"中文，是世界上最美的語言",
textDirection: TextDirection.ltr,////讓文字從左向右流動(dòng)
style: TextStyle(
fontSize: 40.0, //設(shè)置40號(hào)字體
color: Colors.yellow, // 設(shè)置字體顏色
),
)
);
}
}
這樣基本實(shí)現(xiàn)了我們?cè)_發(fā)中構(gòu)建默認(rèn)空工程效果樣子红伦，結(jié)果大致如下：
大致了解Text組件和Container組件的使用英古，下面來詳細(xì)介紹下這兩個(gè)組件中常用的屬性,當(dāng)然這里并未完全列舉出來，這里只是開發(fā)中常用的而已昙读，更多信息需要自己參看源碼或者官方文檔 戳這里 （Text組件） 召调；戳這里 （Container組件）
一、Text組件:
名稱 功能
textAlign 本對(duì)齊方式（center 居中蛮浑，left 左
對(duì)齊唠叛，right 右對(duì)齊，justfy 兩端對(duì)齊）
textDirection 文本方向（ltr 從左至右陵吸，rtl 從右至左）
overflow 文字超出屏幕之后的處理方式（clip
裁剪玻墅，fade漸隱，ellipsis省略號(hào)）
textScaleFactor 字體顯示倍率
maxLines 文字顯示最大行數(shù)
style 字體的樣式設(shè)置
下面是TextStyle的參數(shù)：
名稱 功能
decoration 文字裝飾線（none 沒有線壮虫，lineThrough 刪
除線澳厢，overline 上劃線，underline 下劃線）
decorationColor 文字裝飾線顏色
decorationStyle 文字裝飾線風(fēng)格（[dashed,dotted]虛線囚似，
double 兩根線剩拢，solid 一根實(shí)線，wavy 波浪
線）
wordSpacing 單詞間隙（如果是負(fù)值饶唤，會(huì)讓單詞變得更緊湊)
letterSpacing 字母間隙（如果是負(fù)值徐伐，會(huì)讓字母變得更緊湊）
fontStyle 文字樣式（italic 斜體，normal 正常體）
fontSize 文字大小
color 文字顏色
fontWeight 字體粗細(xì)（bold 粗體募狂，normal 正常體）
二办素、Container組件
名稱 功能
alignment topCenter：頂部居中對(duì)齊
topLeft：頂部左對(duì)齊
topRight：頂部右對(duì)齊
center：水平垂直居中對(duì)齊
centerLeft：垂直居中水平居左對(duì)齊
centerRight：垂直居中水平居右對(duì)齊
bottomCenter 底部居中對(duì)齊
bottomLeft：底部居左對(duì)齊
bottomRight：底部居右對(duì)齊
decoration decoration:BoxDecoration( //設(shè)置容器樣式
color: Colors.blue, //Container的整體背景顏色
border: Border.all( //設(shè)置邊框顏色和寬度
color: Colors.red,
width: 2.0,
),
borderRadius BorderRadius.all(//設(shè)置邊框四邊都圓角
Radius.circular(8.0)
)
)
margin margin 屬性是表示Container與外部其他組件的距離角雷。
padding padding 就是內(nèi)邊距，指Container 邊緣與Child之間的距離
transform 讓 Container進(jìn)行一些位移旋轉(zhuǎn)之類
height 容器高度
width 容器寬度
child 容器子元素
四性穿、本章實(shí)戰(zhàn)
要求：在屏幕中心繪制一個(gè)正方形且讓四邊角進(jìn)行10個(gè)單位的圓角勺三，在中心區(qū)域顯示一段文字，且配置些樣式需曾，如顏色,字體大小和文本穿軸線等吗坚。
import 'package:flutter/material.dart';
//dart入口
void main(){
//flutter 入口
runApp(MyApp());
}
//自定義組件
class MyApp extends StatelessWidget{
//實(shí)現(xiàn)抽象方法
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
//導(dǎo)航欄 可以理解是原生中的ActionBar
appBar: AppBar(
// 設(shè)置ActionBar 標(biāo)題
title:Text("呆萌")
),
// 內(nèi)容區(qū)域
body:HomeContent()
)
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// 此時(shí)的Center 就是整個(gè)屏幕除去狀態(tài)欄和appbar的區(qū)域
return Center(
//在Center區(qū)域創(chuàng)建一個(gè)容器 寬高300
child: Container(
height: 300.0,
width: 300.0,
//設(shè)置容器樣式
decoration: BoxDecoration(
//Container的整體背景顏色
color: Colors.yellow,
//設(shè)置邊框顏色和寬度
border: Border.all(
color: Colors.blue,
width: 2.0
),
//設(shè)置邊框四邊都圓角10個(gè)單位
borderRadius: BorderRadius.all(
Radius.circular(10),
)
),
//設(shè)置內(nèi)邊距 左上右下都為20
padding:EdgeInsets.all(20),
//設(shè)置外邊距 左上右下
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
//按x軸位移100個(gè)單位
// transform:Matrix4.translationValues(100,0,0),
//按z軸旋轉(zhuǎn)百分之30
// transform:Matrix4.rotationZ(0.3),
//將X對(duì)角線提示到1.2倍長度,既高度不變，寬度會(huì)被拉伸
// transform:Matrix4.diagonal3Values(1.2, 1, 1),
//設(shè)置子元素的對(duì)齊方式 居中呆万，既Container 區(qū)域中部
alignment: Alignment.center,
//添加一個(gè)子元素
child: Text(
//設(shè)置文本內(nèi)容
'全世界都在說中國話商源，孔夫子的話越來越國際化',
// 設(shè)置文字左對(duì)齊
textAlign:TextAlign.left,
//文本超出長度 后...顯示方法,需要結(jié)合 maxLines使用
overflow:TextOverflow.ellipsis ,
// 最大顯示行數(shù)
maxLines: 2,
//字體顯示倍率
textScaleFactor: 1.2,
//設(shè)置文本樣式
style:TextStyle(
//16號(hào)字體
fontSize: 15.0,
//文字紅色
color:Colors.red,
fontWeight: FontWeight.w800,
//斜體
fontStyle: FontStyle.italic,
//穿軸線
decoration:TextDecoration.lineThrough,
//穿軸線顯色
decorationColor:Colors.black,
//穿軸線為虛線
decorationStyle: TextDecorationStyle.dashed,
//字母間隙（如果是負(fù)值，會(huì)讓字母變得更緊湊）
letterSpacing: 5.0
)
),
),
);
}
}
代碼中的備注已經(jīng)有了詳細(xì)介紹谋减，這里就不在描述了牡彻，大致效果如下：
溫馨提示：常用開發(fā)指令：
通過命令行 執(zhí)行flutter run
R 鍵：點(diǎn)擊后熱加載，也就算是重新加載吧出爹。
P 鍵：顯示網(wǎng)格讨便，這個(gè)可以很好的掌握布局情況，工作中很有用以政。
O 鍵：切換android和ios的預(yù)覽模式。
Q 鍵：退出調(diào)試預(yù)覽模式伴找。
【討論：】在Android原生開發(fā)中這么一個(gè)界面只需要在xml布局文件就能很輕松實(shí)現(xiàn)盈蛮，但在Flutter 卻要寫這么大一堆代碼，那么你更喜歡那種方式呢技矮？拋開Flutter能生產(chǎn)IOS應(yīng)用外抖誉，你覺得Flutter中這樣的做法到底有什么好處呢？
開篇文章內(nèi)容并不復(fù)雜也沒有太多可講的內(nèi)容衰倦，只是簡單入門了解袒炉，學(xué)習(xí)時(shí)參照上面案例進(jìn)行多加練習(xí)下即可。本章內(nèi)容到此就結(jié)束了樊零，如有不正歡迎留言指正我磁，如果喜歡可以留下你的小紅心！O(∩_∩)O 謝謝大家的觀看驻襟，下章再會(huì)６峒琛！
