一、安裝

1.安裝命令

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn $ git clone -b dev https://github.com/flutter/flutter.git $ export PATH="$PWD/flutter/bin:$PATH" $ cd ./flutter $ flutter doctor 

執(zhí)行完flutter doctor可能會提示報錯，說你缺少編譯器，按照提示的命令去執(zhí)行或者直接去下載編譯器，然后在執(zhí)行flutter doctor，就會看到錯誤減少。

2.更新環(huán)境變量

此時flutter命令只能在當(dāng)前終端窗口運行，要想在其他終端窗口運行還得更新環(huán)境變量。

1.進入你的Flutter SDK目錄下，并記住這個目錄，我的是`/Users/user/flutter` 2.執(zhí)行`vim $HOME/.bash_profile` 3.在`$HOME/.bash_profile`文件里面輸入如下 export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export PATH=(這里是我們Flutter SDK的目錄)/bin:$PATH 4.結(jié)束編輯執(zhí)行`source $HOME/.bash_profile ` 5.運行echo $PATH目錄是否在已經(jīng)在PATH中。 

這樣你就可以在任意的終端窗口運行Flutter命令了。

二、創(chuàng)建項目

打開你的編譯器（我選擇的是Android Stutio），安裝Flutter插件和Dart插件（不會使用Android Stutio的同學(xué)，問問你的Android小伙伴）。

重啟Android Stutio，我們看到如下： newFluuter.png
點擊進入下圖我們選擇Flutter Application newProject.png

創(chuàng)建好我們進入項目目錄查看?？梢钥吹接衖os文件和android文件夾下，分別創(chuàng)建了ios工程和android工程，其實也可以通過這兩個文件夾下的工程去運行Flutter工程。

三、代碼體驗

Flutter中界面上一切都是widget(連手勢都繼承了widget)，又分為無狀態(tài)的StatelessWidget或者是有狀態(tài)的StatefulWidget。
1.Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
2.Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實現(xiàn)一個 stateful widget 至少需要兩個類:

一個 StatefulWidget類。 一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在. 

下面我們再看如下代碼：

import 'package:flutter/material.dart'; //main函數(shù)沒啥好說的 void main() => runApp(new MyApp()); //理解為整個應(yīng)用是一個繼承StatelessWidget的類的對象，本質(zhì)上也是一個Widget，類似與ios中的window需要一個rootViewController，這里也需要一個widget,這里給他返回了一個MaterialApp對象。 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //MaterialApp有需要給home屬性賦值一個Widget對象用來顯示。這里我們給home賦值了一個Scaffold對象。MaterialApp是已經(jīng)封裝了許多屬性的widget，當(dāng)然我們也可以在這直接返回一簡單的如Container,開發(fā)中一般我們不會動這里的返回。 return new MaterialApp( title: 'Welcome to Flutter', //Scaffold是封裝好的widget,我們可以把它當(dāng)做一個頁面去理解。 home: new Scaffold(appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } 

上面有一個問題，當(dāng)我們把Scaffold當(dāng)做一個頁面去理解，當(dāng)出現(xiàn)多個頁面是，就需要多個Scaffold對象，而且每個頁面又會只有狀態(tài)，就要有多個 Scaffold的State類，反而沒法區(qū)分是那個頁面了。
所以我們通常這么用

import 'package:flutter/material.dart'; void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Widget1(), ); } } //直接繼承StatefulWidget的對象來充當(dāng)頁面，Scaffold對象充當(dāng)頁面中的widget。這樣就可以讓每個頁面都有一個State類來操作。 class Widget1 extends StatefulWidget{ @override State<StatefulWidget> createState() { // TODO: implement createState return new Widget1State(); } class Widget1State extends State<Widget1>{ @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text( 'aa', ), ), body: new Text('aa'), ), ); } 

這里我們體驗下Flutter的熱加載，運行成功后，稍微改改文案之類的，按command+S,或者點擊如圖中的??符號，不用再重新運行項目就可以看到變更。

hot.png

四、常用Widget

Text

new Text( 'aabbcc測試下text各種屬性名字好不好',//文案 style: TextStyle(color: Colors.red,fontSize: 22,),//文字顏色，字體大小等 textAlign: TextAlign.left,//居中偏左偏右 maxLines: 1,//最大行， overflow: TextOverflow.ellipsis,//超出問題縮略方式 ) 

富文本

Text.rich( TextSpan( text: '富文本', children: [ TextSpan( text: 'hell0', style: TextStyle(color: Colors.red) ), TextSpan( text: '你好', style: TextStyle(color: Colors.green) ), ], ), ) 

Row、Column

body: Row(crossAxisAlignment: CrossAxisAlignment.end,//指定了元素間對齊方式常用 mainAxisAlignment: MainAxisAlignment.spaceEvenly, //指定了元素間的排列方式 常用 textDirection: TextDirection.rtl, //元素之間的排列順序row使用 不常用 verticalDirection: VerticalDirection.up, //元素之間的排列順序column使用不常用 children: <Widget>[ new Container( height: 100, width: 100, color: Colors.red, ), new Container( height: 100, width: 100, color: Colors.green, ), //Expanded這個元素將暫用剩余的全部空間。 Expanded(child: new Text('aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈')),], ), 

Container

new Container( width: 100, height: 100, //color: Colors.red, padding: EdgeInsets.fromLTRB(0, 0, 50, 50), //設(shè)置子視圖相對Container的邊距，即內(nèi)邊距 alignment: AlignmentDirectional(1, 1),//設(shè)置子視圖相對Container的位置 margin: EdgeInsets.all(20),//設(shè)置Container距離其他視圖的位置child: new Container( //子視圖 height: 20, width: 20, color: Colors.green, ), decoration: BoxDecoration( //出現(xiàn)這個屬性外部就不能再設(shè)置顏色了 color: Colors.red,//設(shè)置顏色 border: Border.all(color: Colors.green,width: 2,), //設(shè)置邊框 borderRadius: BorderRadius.all(Radius.circular(10)),//設(shè)置圓角),), 

Image

Image有多個構(gòu)造方法.

Image.asset( 'images/aa.png', height: 200, width: 200, fit: BoxFit.cover,//填充方式 BoxFit.fill填滿；BoxFit.contain按照圖片寬高比例來有可能填不滿;BoxFit.cover按照圖片寬高比例來有可能圖片被切割 ), 

body: new Image.network( 'https://wx2.sinaimg.cn/mw690/5df4326fgy1fykew2hqq1j22c02c0b29.jpg', //圖片路徑 width: 200, height: 200, ), 

button

button有好幾種，我們先來看看它們的集成關(guān)系。

 IconButton 有一個icon必填屬性,需要一個widget對象，不局限于Icon類型 MaterialButton--->FlatButton(按壓有墨水效果的按鈕),RaisedButton(其實就是一個有抬起效果和按壓有墨水效果的按鈕),OutlineButton(對邊框進行了封裝的按鈕)DropdownButtonRawMaterialButtonFloatingActionButton生成一個圓形的button 

按鈕默認(rèn)點擊會有水波紋的效果，設(shè)置highlightColor屬性會去掉。
這里我發(fā)現(xiàn)兩個問題：問題1.沒有屬性設(shè)置按鈕是否可以點擊；問題2.如何取設(shè)置按鈕的圓角；這兩個問題搞定了，就可以使用MaterialButton滿足一般的開發(fā)需求了。這里我找到了后續(xù)在補充。。。。。

問題1.控制按鈕是否可以點擊可以控制按鈕的onPressed屬性，當(dāng)屬性為null時按鈕不可點擊。

//在這個方法里面控制狀態(tài) setState(() { if(){ _isButton1Disabled = true; }else{ _isButton1Disabled = false; } } RaisedButton( child: new Text('aa'), onPressed: _getBtn1ClickListener(),注意這里一定要帶（）這里實際上是一個函數(shù)。 ); //根據(jù)變量去控制這個方法的返回值是null 還是_clickAction。 _getBtn1ClickListener() { if (_isButton1Disabled) { return null; } else { return _clickAction(); }} //真正的點擊方法 void _clickAction(){ } 

AppBar

new Scaffold( appBar: new AppBar( centerTitle: true,//控制title處于navbar的中心位置。 leading: new IconButton(icon: new Icon(Icons.add), onPressed: _addAction),//navbar左側(cè)按鈕 title: new Text( 'aa', style: TextStyle( color: Colors.red, ), ),actions: <Widget>[ new IconButton(icon: new Icon(Icons.add), onPressed: _addAction), new IconButton(icon: new Icon(Icons.add), onPressed: _addAction), ],//navbar右側(cè)按鈕), 

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17674.html