谷歌親兒子Flutter記錄！不可錯過的個人小知識點!

組件

輸入框

  加背景顏色：decoration: InputDecoration(  fillColor: Colors.white,  filled: true,
  修改寬高：修改TextField的高度可以通過decoration: InputDecoration的contentPadding進行修改  new TextField(
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
            ),
          )
  這種修改可以在沒有prefixIcon的時候生效，如果加入prefixIcon，就會出現一個最小的高度，
  這時，按照如上方法修改如果高度較小的時候會修改失敗。
  因而需要再TextField外層加一個BoxConstraints，代碼如下：  new ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight: 25,
            maxWidth: 200
          ),
          child: new TextField(
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.symmetric(vertical: 4.0),
              hintText: '請輸入搜索內容',
              prefixIcon: Icon(Icons.search),              // contentPadding: EdgeInsets.all(10),
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15),
                  borderSide: BorderSide.none),
              filled: true,
              fillColor: Color(0xffaaaaaa),
            ),
          ),
        ),
  maxHeight為最大高度，可酌情進行更改，實際修改的高度依舊是contentPadding這個屬性。
  maxWidth為最大寬度，可修改TextField的寬度。
  較完整的輸入框：
  Container(
                        width: Adapt.dp(326),
                        height: Adapt.dp(95),
                        child: TextField(
                          maxLines:99,  //                        keyboardType: TextInputType.number,
                          style: TextStyle(
                            color: MyColors.black_00,
                            fontSize: MyFonts.mediumminus,
                          ),  //                        textAlign: TextAlign.center,
                          decoration: InputDecoration(                            //加白色背景
                          fillColor: MyColors.grey_f5,
                            filled: true,  //                          hintText: "最低值",
                            hintStyle: TextStyle(
                                color: MyColors.grey_99,
                                fontSize: MyFonts.small),
                            contentPadding: EdgeInsets.fromLTRB(Adapt.dp(5.0),
                                Adapt.dp(7.0), Adapt.dp(5.0), Adapt.dp(6.0)),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(Adapt.dp(7))),
                                borderSide: BorderSide.none),
                          ),
                        ),
                      ),

加圓角

  抽屜加圓角：    Widget build(BuildContext context) {      return Container(
          decoration: BoxDecoration(
            color: MyColors.white,  //            borderRadius: BorderRadius.circular(Adapt.dp(20)),
          ),
          child: ClipRRect(
              borderRadius: BorderRadius.circular(Adapt.dp(20)),
              child: Drawer(
  普通Container：
  borderRadius: BorderRadius.only(topLeft: Radius.circular (Adapt.dp(20)) ,bottomLeft: 
  Radius.circular (Adapt.dp(20),)),

加邊框

                decoration: BoxDecoration(                  border: Border(right:BorderSide(
                    width: 1,color: Color(0xffddd)
                  ))
                ),

彈出抽屜

  `Scaffold.of() called with a context that does not contain a Scaffold.`
  如果出現此錯，用
  GlobalKey<ScaffoldState> key=new GlobalKey();    void _handlerDrawerButton() {
      key.currentState.openEndDrawer();
    }    Widget build(BuildContext context) {      return Scaffold(
        key: key,
          backgroundColor: MyColors.grey_f5,
          appBar: _appbar,
          endDrawer: DrawerWidget(),或者Container(child:...)
          body: Container(
          ),
          );
    }

在listView中為每一個list增添控制器

    void initState() {      // TODO: implement initState
      super.initState();  //    this.getTotalPrice();
      for (int i = 0; i < productList.length; i++) {  //      controller.add (TextEditingController(text: "1")) ;
        productList[i]["getNum"] = "1";
      }
    }   return productList.map((item){
        var textEditingController = new TextEditingController(text: item["getNum"]);
       TextField(
                      controller: textEditingController,
                            onChanged: (text){  //                  _onChanceCount(item,text);
  //                      setState(() {會彈回輸入框
                       item["getNum"]=text;  //                      });
                      },

Android Studio

  打開Android Studio主界面：
  鍵盤操作Ctrl +Alt+S 打開設置界面
  左側搜索框輸入keymap
  比如想要查找類的名稱補全，就可以在右邊的搜索框內輸入class name關鍵字
  可以進行相關的修改
  shortcut就是快捷鍵的意思
  abbreviation是指縮寫

其他

顏色添加

  color: const Color(0xFF0099ff),  or     /Colors.grey/
  透明： child:Opacity(
                          opacity: 0,
                          child: Container(
                            width: 100.0,
                            height: 100.0,
                            margin: EdgeInsets.all(20.0),
                            color: Color(0xffff0000),
                          ),
                        ),
  color: Colors.transparent或者rgbo

延時加載

  當setState() or markNeedsBuild() called during build.的時候用    void onDataChange2(val) {      if (mounted)
        Future.delayed(Duration(milliseconds: 200)).then((e) {
          setState(() {
            isTab = val;
          });
        }
        );
    }

遷移androidX（runtime和usetime不一致時）

1. 在項目級別build.gradle將類路徑更改為 com.android.tools.build:gradle:3.3.1。
2. 在應用程序級別build.gradle將您的 compileSdkVersion和更改 targetSdkVersion為28。
3. 現在，右鍵單擊flutter項目中的android目錄，轉到Flutter，然后單擊Android Studio中的Open Android模塊。在新窗口中打開項目。
4. 現在，轉到工具欄中的“重構”，然后單擊“遷移到AndroidX”。
5. 然后單擊“執行重構”并等待gradle構建。

改gradle版本

android/gradle/wrapper/grade-wrapper.properties

  #Fri Jun 23 08:50:38 CEST 2017
  distributionBase=GRADLE_USER_HOME
  distributionPath=wrapper/dists
  zipStoreBase=GRADLE_USER_HOME
  zipStorePath=wrapper/dists
  distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip

定時器

驗證碼那樣的

    _countdownTimer =              new Timer.periodic(new Duration(seconds: 1), (timer) {                if (mounted) {
                  setState(() {                    if (countDownNum > 1) {
                      countDownNum--;
                    } else {
                      showCountDown = false;
                      _countdownTimer.cancel();
                      _countdownTimer = null;
                    }
                  });
                }
              });

復制到粘貼板

  GestureDetector(onTap: (){
                        ClipboardData data = new ClipboardData(text:'xx');
                        Clipboard.setData(data);
  })

flutter中bottomNavigationBar切換組件保存狀態方案

cloud.tencent.com/developer/a…

部分修改：

    var _pages= [        new WebPage(),        new DiscoverPage(),        new UserPage(),
      ];

數據源

標準的 ListView構造函數適用于小列表。 為了處理包含大量數據的列表，最好使用 ListView.builder構造函數。

ListView的構造函數需要一次創建所有項目，但 ListView.builder的構造函數不需要，它將在列表項滾動到屏幕上時創建該列表項。

  https://flutterchina.club/cookbook/lists/long-lists/
  final controller = new List<String>.generate(3, (i) => "controller$i");  //下面的報錯https://blog.csdn.net/dpl12/article/details/92012226
  final List<String> items;
  items:new List<String>.generate(1000, (i)=>"item $i")/

延時刷新

    _dataRefresh(){
      Future.delayed(Duration(milliseconds: 200)).then((e) {
        _list = [];
        _getDataList();
      });
    }

最后

上面的內容大家可以收藏學習，希望可以點贊支持一波！！！
可以貢獻一套 Flutte學習視頻，簡信我領取，也可以分享出去一起學習哦