flutter項目中使用

一些小部件

GestureDetector: 手勢
手勢表示由一個或多個指針移動組成的動作。主要有以下幾種
onTap ：點擊事件觸發

Divider() 設置分割線
SharedPreferences數據存儲

SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getKeys()//取出所有key

MainAxisAlignment 水平排列

報錯：A RenderFlex overflowed by 8.0 pixels on the bottom
使用SingleChildScrollView處理使之滑動

Expanded:填滿剩餘空間
Spacer : Row、Column、Flex的子控件的空隙

RefreshIndicator : 下拉刷新

Scaffold : 實現了Material風格的基本佈局結構，它提供了展示drawers、snack bars和bottom sheets的功能。

EdgeInsets:
fromLTRB(double left, double top, double right, double bottom)，分別指定四個方向的填充。
all(doube value)，所有方向均使用相同數值的填充。
only(top:0,right:0,bottom:0,left:0)，可以設置具體某個方向的填充(可以同時指定多個方向)。
symmeric(vertical:0,horizontal:0)，用於設置對稱方向的填充，vertical指top和bottom，horizontal指left和right。

Padding:
Object -> Diagnosticable -> DiagnosticableTree -> Widget -> RenderObjectWidget -> SingleChildRenderObjectWidget -> Padding

MaterialApp(
debugShowCheckedModeBanner: false,//去掉右上角DEBUG標籤
)
定義一個button

new RaisedButton(
   onPressed:(){
     Navigator.pushNamed(context, "/screen2")
   },
   child: new Text("Push to Screen 2"),
),

const MaterialButton({
  Key key,
  @required VoidCallback onPressed,              //點擊按鈕的回調函數
  ValueChanged<bool> onHighlightChanged,         //高亮變化的回調
  ButtonTextTheme textTheme,                     //按鈕的字體主題
  Color textColor,                               //字體顏色
  Color disabledTextColor,                      //禁用時的字體顏色
  Color color,                                  //按鈕背景色
  Color disabledColor,                          //禁用時的背景色
  Color focusColor,                              //聯動節點獲得焦點時的顏色
  Color hoverColor,                              //鼠標懸停時的顏色
  Color highlightColor,                          //按下背景顏色（長按，不是點擊）
  Color splashColor,                            //水波紋顏色
  Brightness colorBrightness,                   //按鈕亮度
  double elevation,                              //陰影尺寸
  double focusElevation,                        //聯動節點獲得焦點時的陰影尺寸
  double hoverElevation,                        //鼠標懸停時陰影尺寸
  double highlightElevation,                    //長按陰影尺寸
  double disabledElevation,                    //禁用時的陰影尺寸
  EdgeInsetsGeometry padding,                  //內邊距
  ShapeBorder shape,                            //按鈕的形狀
  Clip clipBehavior: Clip.none,                //裁剪
  FocusNode focusNode,                         //聯動節點
  MaterialTapTargetSize materialTapTargetSize,  //有效的點擊區域大小
  Duration animationDuration,                  //動畫時間  
  double minWidth,                              //最小寬
  double hight,                                //高度
  Widget child                                  //子節點
})

輸入框,這個用到地方的還是挺多的

TextField(
           autofocus: false,
           controller: controller,
           //綁定焦點1
           focusNode: focusNode2,
           keyboardType: TextInputType.text,
            onChanged: (remark) {getForm('remark',remark);},
           style: TextStyle(fontSize: 12,color:Color.fromRGBO(35, 35, 35, 1)),//輸入文字顏色和大小
           decoration: InputDecoration(
           icon: Icon(Icons.assignment_ind),
           hintText: '請輸入備註信息',//文字提示
           hintStyle: TextStyle(color:Color.fromRGBO(187, 187, 187, 1)),//提示文字顏色
           border: InputBorder.none,//去掉下劃線
           ),
 )
//構造
  const TextField({
    Key key,
    this.controller,            //控制器，控制TextField文字
    this.focusNode,       //焦點
    this.decoration: const InputDecoration(),      //輸入器裝飾
    TextInputType keyboardType: TextInputType.text, //輸入的類型
    this.style,
    this.textAlign: TextAlign.start,
    this.autofocus: false, //是否自動"對焦"
    this.obscureText: false,  //是否隱藏輸入
    this.autocorrect: true,
    this.maxLines: 1,
    this.maxLength,
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改變觸發
    this.onSubmitted,          //文字提交觸發（鍵盤按鍵）
    this.onEditingComplete,  //當用戶提交可編輯內容時調用
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
  })

flutter Icon的使用

PreferredSize : 取消默認,使用自定義appbar

AppBar(
        backgroundColor: ConstValue().barSearchBG, //定義背景顏色
        automaticallyImplyLeading: false, //是否顯示默認的後退按鈕
        elevation: 0, //陰影,值越大越清楚
        titleSpacing: 0,
        title: ....
        ,
      )

Container : 基礎控件,可以組成任意想要的效果

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

decoration屬性介紹:
border：增加一個邊框，
hintText：未輸入文字時，輸入框中的提示文字，
prefixIcon：輸入框內側左面的控件，
labelText：一個提示文字。輸入框獲取焦點/輸入框有內容 會移動到左上角，否則在輸入框內，labelTex的位置.
suffixIcon: 輸入框內側右面的圖標.
icon : 輸入框左側添加個圖標

Container(
          //邊框設置
         decoration: new BoxDecoration(
         //背景
        color: ConstValue().buttonBG,//Colors.lightBlue[50],
        //設置四周圓角 角度
        borderRadius: BorderRadius.all(Radius.circular(2.0)),
         //設置四周邊框
         border: new Border.all(width: 1, color: ConstValue().buttonBG,),
        ),

        child: ....
)

當獲取不到context上下文時,可以通過這種方式跳轉頁面

GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();
	....
  navigatorKey.currentState.pushAndRemoveUntil(
              new MaterialPageRoute(
                  builder: (BuildContext context) => LoginScreen()), (
                  route) => route == null);

更新狀態
定義對象

class TaskModel with ChangeNotifier {
	...
    void update() async {
    ...
    notifyListeners();
    }
 }

初始化

final providers = Providers()
    ..provide(Provider<TaskModel>.value(TaskModel()))

取值或者調用方法賦值

Provide.value<TaskModel>(context).update()

在widget使用(notifyListeners會通知到這裏進行更新)

Provide<SearchModel>(
              builder: (context, child, search) {
                if(search.info !=  null){
                  print(search);
                  loadData();
                }
                return Container();
     }
)

dart相關

async await
void update() async{
await print(“異步”);
}

jsonDecode ->import ‘dart:convert’;
http.get() ->import ‘package:http/http.dart’ as http;

dynamic x = ‘hello’;//dynamic編譯時不會判斷數據類型，但是運行時會推斷，dart的語法檢查失效

??雙問號運算符表示"如果爲空"。例如，採用以下表達式。
String a = b ?? ‘hello’;

字符串數組
List strlist

json轉換請求結果
jsonDecode(utf8.convert(response.bodyBytes))

class Search {
  Search({ //定義構造方法
  this.startDate, 
  this.endDate,
  this.orderCode,
  });

  String  startDate, endDate,orderCode;

//使用對象比較,重寫了相等和hashCode
    @override 
    bool operator ==(Object other) =>
    identical(this, other) || other is Search &&runtimeType == other.runtimeType &&
    startDate == other.startDate &&
    orderCode == other.orderCode &&
    endDate == other.endDate;
        
    @override
    int get hashCode => orderCode.hashCode ^ endDate.hashCode ^ startDate.hashCode;

   factory Search.fromJson(Search other) {
      return Search(
        startDate: other.startDate,
        endDate: other.endDate,
        orderCode: other.orderCode,
      );
    
  }
  //相等於toString
    void call(){
      print("startDate is $startDate , endDate is $endDate , orderCode is $orderCode");
    }
}