Flutter學習日記

Flutter 一切皆widget

1.AppBar屬性

leading：導航欄左返回視圖（widget），默認push到下一個頁面，左視圖自帶返回箭頭，點擊方法系統已實現。

可是最外層 是 return MaterialApp(); 包裹，是沒有返回按鈕的

若是要自定義圖標：

leading: IconButton(
        disabledColor: Colors.red,
        icon: Icon(Icons.menu),
         onPressed: null
    ),
複製代碼

IconButton 原本單獨寫一篇文章，可是寫成筆記先記着 IconButton 設置顏色的時候，注意 onPressed 是否實現，爲了習慣統一，能夠默認設置 onPressed:(){}; 爲何這樣說呢？接着往下看：

Color:
設置了圖標點擊回調，則用於按鈕內圖標的顏色;

highlightColor:
按鈕處於向下（按下）狀態時按鈕的輔助顏色;

splashColor
按鈕處於向下（按下）狀態時按鈕的主要顏色;

disabledColor:
沒設置圖標點擊回調，則用於按鈕內圖標的顏色
複製代碼

IconButton(
  //onPressed 爲null,圖標顏色默認爲灰色調，能夠經過disabledColor設置此時圖標顏色
  //onPressed 非null,圖標顏色默認爲白色，能夠經過color設置此時圖標顏色
  //其餘狀態顏色設置，參考前面顏色介紹
  //    color: Colors.red,
      disabledColor: Colors.green,
      icon: Icon(Icons.add),
      onPressed: null
      ）
複製代碼

注意點: 設置title ,默認居中，可是當咱們設置 actions 個數大於等於2的時候，title會偏移，因此這句 centerTitle: true 仍是須要寫上的

2.問題：

學習過程不斷嘗試，以iOS職業思惟去搞，發現問題： 場景：首頁導航欄，此時外層是MaterialApp，自定義leading屬性，建立一個IconButton ,總體架構是：

MaterialApp(

    -home: Scaffold(
    
    appBar: new AppBar(
      leading: 自定義
      ......使用Navigator.push報錯
      
      可是body 裏面使用Navigator.push 正常
複製代碼

push到一個新Widget, 報錯信息：

Navigator operation requested with a context that does not include a Navigator.

百度，可是看到一個複雜的方案 外層使用StatelessWidget ，將路由跳轉功能封裝到StatefulWidget中 ？？看完代碼（具體本身百度），個人天，這麼麻煩，若是是後期加的需求，確定要加班搞，放棄，尋找更簡便方法，沒辦法，偷懶一下，站在巨人肩上看的遠，可是，得換個巨人了，那就換

在須要點擊跳轉的子View外部包一層Builder以下：

child: Builder(builder: (context) {
  return GestureDetector(
    onTap: () {
      Navigator.push(context, MaterialPageRoute(builder: (context)=>NewWigets()));
    },
    child: Text("本身想"),
  );
}   
複製代碼

上述是思路，我得 根據我實際場景改代碼，信手捏來：

leading: Builder(builder: (context) {
   return GestureDetector(
  // 這是照着實驗檢測可行，註釋一下了
//              onTap: () {
//                Navigator.pushNamed(context, tableVC);
//              },
//              child: Icon(Icons.menu),
//    我來自定義一下，
     child:  IconButton(
       disabledColor: Colors.red,
       icon: Icon(Icons.menu),
       onPressed:(){
//                   Navigator.pushNamed(context, tableVC);
         Navigator.push(context, MaterialPageRoute(builder: (context)=>DetailWigets()));
        },
     )
   );
 },
複製代碼

代碼複製過去就能夠直接用，就是那麼優秀，註釋掉的代碼能夠刪掉，跳轉的DetailWigets記得換哈，【斜眼笑】

模糊的學習了一些，處處看了看，簡單的學了幾個UI控件，暫時沒有記錄，只是記錄了剛入門碰到的問題，後續會記錄UI ，佈局，網絡，實戰等app的相關內容

針對環境配置，一直想學flutter,基於沒有太多精力和心思，環境早就配置好了,就沒有記錄了，百度就能夠弄好，畢竟mac配置下來仍是簡單。

mac電腦 + Xcode + AndroidStudio ,VS Code 我也裝了，可是用AndroidStudio就很好的支持編寫flutter了， flutter和 Android 一個廠裏的，本身人嘛，工具選個喜歡的就行。

路漫漫其修遠兮，吾將上下而求索
                        ——致程序員逝去的青春複製代碼