Flutter學習日記

我嘞giaogiao發表於2020-02-29
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中 ？？看完程式碼（具體自己百度），我的天，這麼麻煩，如果是後期加的需求，肯定要加班搞，放棄，尋找更簡便方法，沒辦法，偷懶一下，站在巨人肩上看的遠，但是，得換個巨人了，那就換

Flutter學習日記

在需要點選跳轉的子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 一個廠裡的，自己人嘛，工具選個喜歡的就行。

                   路漫漫其修遠兮，吾將上下而求索
                        ——致程式設計師逝去的青春複製程式碼

相關文章