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

yilian發表於2020-02-26

元件

輸入框

  加背景顏色: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的建構函式不需要,它將在列表項滾動到螢幕上時建立該列表項。

  
  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學習影片,簡信我領取,也可以分享出去一起學習哦

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69952849/viewspace-2677336/,如需轉載,請註明出處,否則將追究法律責任。

相關文章