谷歌親兒子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不一致時)
- 在專案級別build.gradle將類路徑更改為
com.android.tools.build:gradle:3.3.1
。 - 在應用程式級別build.gradle將您的
compileSdkVersion
和更改targetSdkVersion
為28。 - 現在,右鍵單擊flutter專案中的android目錄,轉到Flutter,然後單擊Android Studio中的Open Android模組。在新視窗中開啟專案。
- 現在,轉到工具欄中的“重構”,然後單擊“遷移到AndroidX”。
- 然後單擊“執行重構”並等待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學習影片,簡信我領取,也可以分享出去一起學習哦
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69952849/viewspace-2677336/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Flutter個人小知識點記錄Flutter
- 知識點記錄
- 記錄的小知識點
- 學習記錄 -- 知識點
- golang小知識點記錄Golang
- python知識點記錄_01Python
- python知識點記錄_03Python
- 谷歌新商標MODE曝光:親兒子智慧手錶來了!谷歌
- vuex狀態管理知識點記錄Vue
- R學習-知識點記錄(Temp)
- Flutter 中的 ListView 的一個容易忽略的知識點FlutterView
- python學習-知識點記錄(Temp)Python
- Flutter入門,開發者需要知道的10個知識點Flutter
- Flutter 面試知識點集錦Flutter面試
- 五月前端知識集錦(每月不可錯過的文章集錦)前端
- 六月前端知識集錦(每月不可錯過的文章集錦)前端
- 四月前端知識集錦(每月不可錯過的文章集錦)前端
- PLook——記錄你的知識
- php知識點目錄PHP
- 一些知識點的整理以及面試題記錄面試題
- Android知識點目錄Android
- Git的11個知識點Git
- 幾個MQTT的知識點MQQT
- 初識python必知的6個知識點Python
- web開發者不可錯過的11個JavaScript工具WebJavaScript
- Flutter 資料庫sqflite使用知識點Flutter資料庫
- Flutter 知識點總結-基礎篇Flutter
- PHP 易錯知識點整理PHP
- JavaScript 易錯知識點整理JavaScript
- JavaScript易錯知識點整理JavaScript
- Flutter 上預設的文字和字型知識點Flutter
- 關於Flutter 您必須知道的知識點!!!Flutter
- 學習筆記:Android這四個你不可不知的知識點,你都瞭解多少?筆記Android
- numpy知識點筆記筆記
- 生物知識點筆記筆記
- ElasticSearch知識點小記Elasticsearch
- C++必知的幾個知識點C++
- 你不可不知的50個數學知識