Flutter、Dart学习总结

作者: xmb | 来源:发表于2019-05-14 17:49 被阅读141次
    • Container

    添加 padding, margins, borders, background color, 或将其他装饰添加到widget

    • Scaffold

    使用Scaffold是最容易的,它是 Material Components库中的一个widget,它提供了一个默认banner,背景颜色,并且具有添加drawer,snack bar和底部sheet的API

    • DefaultTextStyle

    DefaultTextStyle.merge可以允许您创建一个默认的文本样式,该样式会被其所有的子节点继承

    • maxCrossAxisExtent

    GridView.extent中maxCrossAxisExtent的作用

    • SizedBox

    能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效

            new SizedBox(
              width: 100.0,
              height: 100.0,
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Color(0xffff0000),
              ),
            )
    
    • State状态管理

    1. 如果状态是用户数据,如复选框的选中状态、滑块的位置,则该状态最好由父widget管理
    2. 如果所讨论的状态是有关界面外观效果的,例如动画,那么状态最好由widget本身来管理
    3. 如果有疑问,首选是在父widget中管理状态
    • flutter的Key

    Flutter-->何时需要使用到key?
    flutter 中的 key

    • flutter的json转为实体类插件(Android Studio插件)

    AS中搜索插件FlutterJsonBeanFactory,安装,重启AS。
    在指定目录下,右键,new - dart bean class File From JSON,粘贴进json,格式化,生成即可。

    路径
    • dart中export使用

    在A库中使用export关键字引入B库,当我们使用A库的时候,会自动引入B库,也就是说我们导入了A库,就可以使用B库了。

    • cupertino下push的同时,隐藏tabbar

    Navigator.of(context, rootNavigator: true)
              .push(CupertinoPageRoute(builder: (BuildContext context) {
            return new MsgCenterPage();
          }));
    
    • flutter使用16进制色值

    Color(0xFFFF8A65)其中0x后面的两位FF表示透明度16进制,FF后面为色值

    • flutter获取屏幕宽高和状态栏高度

    /** 获取屏幕宽度 */
      static double getScreenWidth(BuildContext context) {
        return MediaQuery.of(context).size.width;
      }
    
      /** 获取屏幕高度 */
      static double getScreenHeight(BuildContext context) {
        return MediaQuery.of(context).size.height;
      }
    
      /** 获取系统状态栏高度 */
      static double getSysStatsHeight(BuildContext context) {
        return MediaQuery.of(context).padding.top;
      }
    
    • GestureDetector为布局添加手势,child和空白区域全部可点击

    GestureDetector的child添加为Container,同时Container要设置color,整体Container的child和空白区域才全部可点击,否则则是Container的child可点而空白不可点击。

    • 隐藏键盘

    FocusScope.of(context).requestFocus(FocusNode());
    
    • dynamic的使用

    在数据解析过程中,如果不确定当前类型的话,可以使用dynamic来代替,具体是某个类型的话,再转为某个类型。

    
    @JsonSerializable()
    class ResultData extends Object {
    
      @JsonKey(name: 'code')
      String code;
    
      @JsonKey(name: 'data')
      dynamic data;
    
      @JsonKey(name: 'url')
      String url;
    
      @JsonKey(name: 'message')
      String message;
    
      ResultData(this.code,this.data,this.url,this.message,);
    
      factory ResultData.fromJson(Map<String, dynamic> srcJson) => _$ResultDataFromJson(srcJson);
    
      Map<String, dynamic> toJson() => _$ResultDataToJson(this);
    
    }
    
    • flutter延迟执行

    new Future.delayed(Duration(seconds: 2), () {
            Navigator.of(context).pop();
          });
    
    • flutter中url中编码解码

    例如:需要将
    js://iOSAction?%7B%22method%22:%22toLogin%22%7D
    转为
    js://iOSAction?{"method":"toLogin"}
    使用Uri的decode方法:
    String url = Uri.decodeFull(navigation.url);
    相反,编码的话,使用Uri的encode方法。

    • flutter的图片布局填充满父布局

    方法一:
    new ConstrainedBox(
                      constraints: new BoxConstraints.expand(),
                      child: new FadeInImage.assetNetwork(
                        placeholder: "assets/home/placeholder_default.png",
                        image: model != null
                            ? "${APIConfig.pictureURL}"
                            "${model.pictureUrl}"
                            : null,
                        fit: BoxFit.fill,
                      ),
                    ),
    
    方法二:
    如果已知宽高,Image里直接定义指定的宽和高
    MediaQuery.of(context).size.width
    MediaQuery.of(context).size.height
    
    • Text超出省略号截断

    TextOverflow.ellipsis

    new Text(
                      '我爱北京天安门,我爱北京天安门,我爱北京天安门,我爱北京天安门,我爱北京天安门,我爱北京天安门,我爱北京天安门',
                      overflow: TextOverflow.ellipsis,
                    ),
    
    • list通过map转化的时候获取index

    list通过asMap转为Map,然后使用Map.map获取index

        homeNoticeList
            .asMap()
            .map((index, model) => MapEntry(
                  index,
                  new GestureDetector(
                    onTap: () {
                      logPrint(index, message: "我点击了滚动的广告");
                    },
                    child: new Container(
                      color: ColorConfig.white,
                      child: new Align(
                        alignment: Alignment.centerLeft,
                        child: new Text(
                          model.title,
                          style: new TextStyle(fontSize: 14.0),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                  ),
                ))
            .values
            .toList();
    
    • Cookie管理

    网络请求使用dio进行网络请求,可以添加cookiemanager拦截器,来对cookie进行自动管理,也可手动删除cookie。
    Flutter中添加依赖

      dio: ^2.1.7 # 网络请求
      cookie_jar: ^1.0.0 # cookie管理
    

    dio请求封装中,添加拦截器:

    // 添加`Cookie`管理
        dio.interceptors.add(CookieManager(CookieJar()));
    

    然后在requestheaders中会自动增加

    cookie: SESSION=9d41c3e9-5619-492f-aa92-d85add6b04ed
    

    iOSmoya cookie不一样,一个是cookie,一个是"Set-Cookie"(header中拼入):

    ["Set-Cookie":SESSION=9d41c3e9-5619-492f-aa92-d85add6b04ed]
    
    • Appbar中使用自定义的返回按钮

    先设置automaticallyImplyLeadingfalse,然后在leading中设置返回按钮。

    automaticallyImplyLeading: false,
          leading: new GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: new Image.asset('assets/common/nav_back_arrow.png'),
          ),
    
    • 设置appbar高度

    appBar: new PreferredSize(
            child: appBar,
            preferredSize: Size.fromHeight(44),
          ),
    
    • 使用webview_flutter时执行调用js的方法:

    推荐在onPageFinished里调用。
    例如:

    onPageFinished: (String url) {
                          print("page finished loading: $url");
                          setState(() {
                            isLoading = false;
                          });
    
                          // 如果为项目风险等级的url,则执行隐藏header的js。
                          if (widget.url == ContentConfig.projectRiskLevel) {
                            _controller.future.then((controller) {
                              controller
                                  .evaluateJavascript('hideHeader();')
                                  .then((result) {});
                            });
                          }
                        }
    
    • android studio中使用print打印,只能打印出一部分的解决办法:

    导入foundation库:
    import 'package:flutter/foundation.dart';
    使用flutterfoundation中的debugPrint打印即可打印全部。

    • TabBar对应的TabController使用代码切换tabBar (index从0开始):

    controller.animateTo(index);
    
    • flutter富文本RichText使用

    RichText在段落中显示不同样式

    • 复制到粘贴板

    import 'package:flutter/services.dart';
    
      static copyToClipboard(final String text) {
        if (text == null) return;
        Clipboard.setData(new ClipboardData(text: text));
      }
    
    • 返回当前的时间戳

    static int currentTimeMillis() {
        return new DateTime.now().millisecondsSinceEpoch;
      }
    
    • 返回文件大小字符串

    static const RollupSize_Units = ["GB", "MB", "KB", "B"];
      /** 返回文件大小字符串 */
      static String getRollupSize(int size) {
        int idx = 3;
        int r1 = 0;
        String result = "";
        while (idx >= 0) {
          int s1 = size % 1024;
          size = size >> 10;
          if (size == 0 || idx == 0) {
            r1 = (r1 * 100) ~/ 1024;
            if (r1 > 0) {
              if (r1 >= 10)
                result = "$s1.$r1${RollupSize_Units[idx]}";
              else
                result = "$s1.0$r1${RollupSize_Units[idx]}";
            } else
              result = s1.toString() + RollupSize_Units[idx];
            break;
          }
          r1 = s1;
          idx--;
        }
        return result;
      }
    
    • flutter调起拨打电话

    import 'package:url_launcher/url_launcher.dart';
    
    Future<void> _launched;
    
    Future<void> _makePhoneCall(String url) async {
        if (await canLaunch(url)) {
          await launch(url);
        } else {
          throw 'Could not launch $url';
        }
      }
    
    // 调起拨打电话
              setState(() {
                _launched = _makePhoneCall('tel:18612345678');
              });
    
    • 垂直分割线

    Container(
                      height: 40,
                      child: VerticalDivider(color: Colors.red),
                    ),
    

    相关文章

      网友评论

        本文标题:Flutter、Dart学习总结

        本文链接:https://www.haomeiwen.com/subject/eqyeaqtx.html