一、安裝

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 

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

2.更新環境變量

此時flutter命令只能在當前終端窗口運行，要想在其他終端窗口運行還得更新環境變量。

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

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

二、創建項目

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

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

創建好我們進入項目目錄查看。可以看到有ios文件和android文件夾下，分別創建了ios工程和android工程，其實也可以通過這兩個文件夾下的工程去運行Flutter工程。

三、代碼體驗

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

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

下面我們再看如下代碼：

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

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

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的對象來充當頁面，Scaffold對象充當頁面中的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), //設置子視圖相對Container的邊距，即內邊距 alignment: AlignmentDirectional(1, 1),//設置子視圖相對Container的位置 margin: EdgeInsets.all(20),//設置Container距離其他視圖的位置child: new Container( //子視圖 height: 20, width: 20, color: Colors.green, ), decoration: BoxDecoration( //出現這個屬性外部就不能再設置顏色了 color: Colors.red,//設置顏色 border: Border.all(color: Colors.green,width: 2,), //設置邊框 borderRadius: BorderRadius.all(Radius.circular(10)),//設置圓角),), 

Image

Image有多個構造方法.

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有好幾種，我們先來看看它們的集成關系。

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

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

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

//在這個方法里面控制狀態 setState(() { if(){ _isButton1Disabled = true; }else{ _isButton1Disabled = false; } } RaisedButton( child: new Text('aa'), onPressed: _getBtn1ClickListener(),注意這里一定要帶（）這里實際上是一個函數。 ); //根據變量去控制這個方法的返回值是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左側按鈕 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右側按鈕), 

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/17674.html