谷歌亲儿子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 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.generate(3, (i) => "controller$i");
  //下面的报错https://blog.csdn.net/dpl12/article/details/92012226
  final List items;
  items:new List.generate(1000, (i)=>"item $i")/

延时刷新

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

最后

上面的内容大家可以收藏学习，希望可以点赞支持一波！！！
可以贡献一套Flutte学习视频，私信我领取，也可以分享出去一起学习哦