Flutter学习记录总结

最新推荐文章于 2024-10-01 20:41:19 发布

九个诚

最新推荐文章于 2024-10-01 20:41:19 发布

阅读量82

点赞数

文章标签： flutter 学习

本文链接：https://blog.csdn.net/Kyling817/article/details/132571274

版权

flutter学习记录总结

文章目录

flutter学习记录总结

学习过程

构建项目封装好工具类照着钉钉编写页面随写随添加插件和工具类

目录结构介绍与框架搭建

已用插件介绍

https://pub.flutter-io.cn/

sharedPreferences

本地数据存储

调用异步方法setInstance方法来初始化一个sharePreferences对象

之后通过这个对象调用相应方法来进行存取操作

crypto

包含了一套基于dart的工具集

我们用的是md5 封装了一个string2md5的方法直接调用即可

toast

easyLoading

加载动画的插件直接调用显示和退出方法即可

EasyLoading.show();
EasyLoading.dismiss();

provider

就是便于页面间和页面内数据操作和页面根据数据变化进行刷新的一个工具

如果有页面需要根据数据动态渲染或者某个页面需要其他页面的数据时需要使用

使用步骤：

在provider文件夹里定义provider实体并定义数据更新方法

以loginProvider为例
在provider.dart文件里面实例化并引入该provider

然后就可以在你想使用的页面中进行使用了

使用分为两种一个是修改该provider的值，此时需要用 content.read方法

context.read<LoginProvider>().updateLoginProvider(
    loginId: this.loginIdController.text,
    password: this.pwdController.text
);

一种是将provider的值与页面内容进行绑定，此时首先要用Consumer组件将想要绑定的内容进行包裹才能达到双向绑定用的时候直接provider.就行了

Consumer(builder: (context, LoginProvider provider, child) {
      return TextField(
        controller: this.loginIdController,
        decoration: InputDecoration(
          icon: Icon(Icons.account_circle_rounded),
          labelText: "用户名",
          labelStyle: TextStyle(fontSize: 18),
          suffixIcon: provider.loginId == ""
              ? null
              : GestureDetector(
                  onTap: () {
                    this.loginIdController.text = "";
                    changeText();
                  },
                  child: Icon(
                    Icons.cancel,
                    color: Color.fromRGBO(162, 162, 164, 1),
                  ),
                ),
        ),
        onChanged: (value) {
          changeText();
        },
      );
    });

giffyDialog

带动图的提示框

方法已经封装好直接调用

getWidget

https://github.com/ionicfirebaseapp/getwidget

提供大量组件的UI库引用完直接使用其中组件即可

flutterAppUpgrade

提示升级的窗口使用方法参考文档

16进制颜色转化

flutter的color组件只接受int型数据，通过HexUtil类里的方法我们可以通过16进制的数据来获取颜色

color: Color(HexUtil.getColorFromHex("448AFF"))

页面编写流程及代码规范

首先要在对应的位置创建页面对应的文件夹和dart文件

命名规则： **单词小写用下划线隔开** 如果是整个页面就用xxx_page 如果是组件就直接用组件的名字英译 **要直观**

其次进行页面或者组件的编写

此时，引用其他文件的内容时选择绝对路径的方法

import 'package:sc_oa/util/get_preferences.dart';

在编写多个组件组合而成的页面或者组件时应将每个单独的组件抽离出来 定义一个返回该组件的方法在最外层调用这些方法实现页面的加载来保证代码的可读性和层次性

再次，涉及到网络请求的地方首先要在entity文件夹中定义好请求实体和响应实体

https://javiercbk.github.io/json_to_dart/

再调用post方法进行网络请求，此时参数要以请求实体的形式传入，直接使用实体的构造函数即可

成功的回调函数写在post的.then回调函数里面，成功后要进行响应实体的实例化再进行使用；

post的错误处理写在.then的onError参数里，显示错误信息直接调用封装好的错误处理函数即可

Code.errorHandle(context,code: e.code, msg: e.msg);

涉及到引用本地资源文件时要先将文件放在asset文件夹对应的目录内

还要在.yaml文件内配置好，注意配置文件内的空格表示对应的层次关系要空对

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

涉及到引用其他插件的要记得在配置文件内写好并get后再import进去

如果大量使用可以考虑封装起来放到util文件夹或者widget文件夹中

设计页面跳转的时候在route文件里面定义好路由信息

final routes = {
  '/index': (context) => NavTab(),
  '/search': (context) => ArticleSearch(),
  '/login': (context) => LoginPage(),
  '/settings': (context) => SettingsPage(),
  '/security': (context) => SecurityCenter(),
};

使用的时候直接调用这个文件里面的值就可以了

Navigator.pushNamed(context, '/settings');

by the way 我们封装的route也包含了传值路由的功能

大地老师视频：https://www.bilibili.com/video/BV1S4411E7LY?p=4

//定义
final routes={
  '/productInfo':(context,{arguments})=>ProductInfo(arguments:arguments),
};
//带值跳转
Map pid = {
    "count":123
};
Navigator.pushNamed(context, "/productInfo",arguments: pid);
//取值
class ProductInfo extends StatefulWidget {
  final Map arguments;
  ProductInfo({Key key,this.arguments}) : super(key: key);

  @override
  _ProductInfoState createState() => _ProductInfoState(arguments: this.arguments);
}

class _ProductInfoState extends State<ProductInfo> {
  Map arguments;
  _ProductInfoState({this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text("Back"),
        onPressed: (){
          Navigator.pop(context);
        },
      ),
      appBar: AppBar(
        title: Text(
          "商品详情页",
          textAlign: TextAlign.center,
        ),
      ),
      body: Container(
          height: 100,
          alignment: AlignmentDirectional.center,
          child: Column(
            children: [
              Text("我是商品详情页",
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.green
                ),
              ),
              Text('${this.arguments["count"]}'),
            ],
          )
      ),
    );
  }
}