2020-12-02-九机面试经历

Flutter1.0初学开发项目时进行主题简单封装

#### 一、设置模式key

```dart
///普通模式key
const String PRIMARY = 'PRIMARY';

///暗黑模式key
const String DIABLOMODE = 'DIABLOMODE';
```

 #### 二、定义主题色

```dart
import 'package:flutter/material.dart';

class SkinElement{

  final Color primaryFFFFFF;
  final Color primary000000;

 final Color primary00CCA9;
 final  Color primaryFFBB33;
 final Color primary409EFF;
 final Color primaryFF6666;


 final Color primary303133;
 final Color primary606266;
 final Color primary909399;
 final Color primaryC0C4CC;


 final Color primaryD9D9D9;
 final Color primaryE6E6E6;
 final Color primaryF5F5F5;

 final  double fontSize11;
 final  double fontSize12;
 final double fontSize13;
 final double fontSize14;
 final double fontSize15;
 final double fontSize16;
 final double fontSize18;
 final double fontSize20;
 final double fontSize30;
  final double fontSize36;
 SkinElement(
     {
       this.primary00CCA9 = const Color(0XFF00CCA9),
       this.primaryFFFFFF = const Color(0XFFFFFFFF),
       this.primary000000 = const Color(0XFF000000),
       this.primaryFFBB33 = const Color(0XFFFFBB33),
       this.primary409EFF = const Color(0XFF409EFF),
       this.primaryFF6666 = const Color(0XFFFF6666),
       this.primary303133 = const Color(0XFF303133),
       this.primary606266 = const Color(0XFF606266),
       this.primary909399 = const Color(0XFF909399),
       this.primaryC0C4CC = const Color(0XFFC0C4CC),
       this.primaryD9D9D9 = const Color(0XFFD9D9D9),
       this.primaryE6E6E6 = const Color(0XFFE6E6E6),
       this.primaryF5F5F5 = const Color(0XFFF5F5F5),
       this.fontSize11 = 11.0,
       this.fontSize12 = 12.0,
       this.fontSize13 = 13.0,
       this.fontSize14 = 14.0,
       this.fontSize15 = 15.0,
       this.fontSize16 = 16.0,
       this.fontSize18 = 18.0,
       this.fontSize20 = 20.0,
       this.fontSize30 = 30.0,
       this.fontSize36 = 36.0
     });

}
```

#### 三、根据模式切换主题

```dart
  ///根据模式更换颜色
  static SkinElement _getColor(){
    switch(App.themeColorString){
      case ColorMode.PRIMARY :
        return SkinElement();
      case ColorMode.DIABLOMODE :
        return SkinElement();
      default :
        return SkinElement();
    }
  }

```

#### 四、处理不透明度

```dart
/// 自动根据设计稿不透明度计算出具有透明度的颜色
  /// @param opacity 不透明度
  /// @param  color 颜色值
  /// @return color
  /// @author 
  /// created at 2020/5/27 16:41
  static Color getOpacityColor(int opacity,Color color){
    ///根据不透明度计算成透明度
    double _percent = (opacity == 0 || opacity <0) ? 0 : (opacity / 100);
    int _length = color.value.toString().length;
    if(_length == 10 && _percent != 0){
      ///根据透明度计算成十六进制透明度
      String _hexadecimal = (_percent * 255).round().toRadixString(16);
      ///获取颜色value值并转成16进制
      String _intString = color.value.toRadixString(16).toString();

      ///获取传入的十六进制数
      String _hexadecimalColor = _intString.substring(2,_intString.length);
    return Color(_hexToInt('$_hexadecimal$_hexadecimalColor'));
    }
    return color;
  }
  
  /// 十六进制字符串转成int类型
  /// @param  hex 十六进制字符串
  /// @return int
  /// @author 
  /// created at 2020/5/27 16:39
  ///
  static int _hexToInt(String hex) {
    int val = 0;
    int len = hex.length;
    for (int i = 0; i < len; i++) {
      int hexDigit = hex.codeUnitAt(i);
      if (hexDigit >= 48 && hexDigit <= 57) {
        val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
      } else if (hexDigit >= 65 && hexDigit <= 70) {
        // A..F
        val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
      } else if (hexDigit >= 97 && hexDigit <= 102) {
        // a..f
        val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
      } else {
        throw new FormatException("Invalid hexadecimal value");
      }
    }
    return val;
  }
```

#### 五、项目调用

```dart
static SkinElement rcColor = _getColor();
```

#### 六、可以新抽出透明度管理

#### 七、抽离透明度原因

> flutter 颜色自带Color属性有透明度相关方法但是抽出颜色管理后,根据赋值后的颜色去调用Color自带的透明度
>
> 在编译时不会报错,但是运行后会报错



Flutter学习之主题色封装与不透明度计算

#### **RcTheme.rcColor对应为颜色,自己项目封装的主题色**

```dart
class SearchUtils {
 static TextStyle _active = TextStyle(
   color: RcTheme.rcColor.primary00CCA9,
   fontSize:RcTheme.rcColor.fontSize18,
 );
 static TextStyle _off = TextStyle(
   color: RcTheme.rcColor.primary303133,
   fontSize:RcTheme.rcColor.fontSize18,
 );
  /// 获取高亮关键字文本
  static List<InlineSpan> getTitle(String source, String keyword, {TextStyle activeStyle,TextStyle offStyle}) {
    print("activeStyle = $activeStyle");
    activeStyle = activeStyle??_active;
    offStyle = offStyle??_off;
    List<InlineSpan> list = [];
    List<String> sourceList = [];
    List<String> temp = source?.split(keyword);
    temp?.forEach((s) {
      sourceList.add(s);
      sourceList.add(keyword);
    });
    if (sourceList.length > 0) sourceList.removeLast();
    sourceList?.forEach((v) {
      if(v.isEmpty) {
        return;
      }
      if (v == keyword) {
        list.add(TextSpan(
            text: keyword,
            style: activeStyle
        ),);
      } else {
        list.add(TextSpan(
            text: v,
            style: offStyle
        ),);
      }
    });
    return list;
  }
}
```



Flutter学习之模糊搜索关键字与返回内容对应高亮封装


#### fluro路由传参时需要解析到地址上

```dart
  static String  mapToQuery (Map data){
    String query =  "";
    if (data != null) {
      int index = 0;
      for (dynamic key in data.keys) {
        dynamic value = Uri.encodeComponent(data[key]+"");
        if (index == 0) {
          query = "?";
        } else {
          query = query + "\&";
        }
        query += "$key=$value";
        index++;
      }
    }
    return query;
  }
```



Flutter学习之路由参数动态解析

Flutter1.0初学时使用rxDart搭建状态管理

#### 一、简单的数据处理模式

> ```dart
> 引入InheritedWidget提升性能
> ```

#### 二、源代码

```dart
import 'package:flutter/material.dart';
//Type _typeOf<T>() => T;
abstract class BlocBase {

  bool  _isNoData = false;
  bool  get isNoData => _isNoData;

  int get size => 20;

  Future getData({dynamic labelId,dynamic data,int page});

  Future onRefresh({dynamic labelId,dynamic data});

  Future onLoadMore({dynamic labelId,dynamic data});

  void dispose();
}

class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
    this.userDispose: true,
  }) : super(key: key);

  final T bloc;
  final Widget child;
  final bool userDispose;

  @override
  _BlocProviderState<T> createState() => _BlocProviderState<T>();

  static T of<T extends BlocBase>(BuildContext context){
    ///ancestorInheritedElementForWidgetOfExactType即将废弃 12.1版本
//    final type = _typeOf<_BlocProviderInherited<T>>();
//    _BlocProviderInherited<T> provider = context.ancestorInheritedElementForWidgetOfExactType(type)?.widget;
    _BlocProviderInherited<T> provider =context.getElementForInheritedWidgetOfExactType<_BlocProviderInherited<T>>()?.widget as _BlocProviderInherited<T>;
    return provider?.bloc;
  }

//  static T of<T extends BlocBase>(BuildContext context) {
//    final type = _typeOf<BlocProvider<T>>();
//    BlocProvider<T> provider = context.ancestorWidgetOfExactType(type);
//    return provider.bloc;
//  }


}

class _BlocProviderState<T extends BlocBase> extends State<BlocProvider<T>> {

  @override
  void dispose() {
    if (widget.userDispose) widget.bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _BlocProviderInherited<T>(
      bloc: widget.bloc,
      child: widget.child,
    );
    ///widget.child;
  }
}

///引入InheritedWidget提升性能
class _BlocProviderInherited<T> extends InheritedWidget{
  _BlocProviderInherited({
    Key key,
    @required Widget child,
    @required this.bloc,
  }) : super(key: key, child: child);

  final T bloc;
  @override
  bool updateShouldNotify(_BlocProviderInherited oldWidget) => false;
}

```

#### 三、可自行更改BlocBase文件

> 根据需求自行更改BlocBase文件内容,当前源码适用于列表请求

#### 四、配合rxdart使用

 	##### 1.页面数据渲染状态定义

```dart
enum RequestTypeEnum{
  ///初始化页面
  InitPage,
  ///空页面
  EmptyPage,
 ///成功页面
  SuccessPage,
  ///错误页面
  ErrorPage,
  ///无权限
  NoPermissionPage,
  ///无登录
  NoLogIn
}

/// 列表请求返回状态以及数据,控制页面显示
/// @param
/// @return
/// @author 
/// created at 2020/8/4 14:16
///
class RequestDataSource{
  ///唯一值
  final Object type;
  ///数据列表
  final List<dynamic> mapList;
  ///数据请求返回类型
  RequestTypeEnum sourceType;
  ///是否有下一页
  bool isMore;
  ///页码
  int page;

  RequestDataSource(this.type, this.mapList, [this.page = 0,this.sourceType = RequestTypeEnum.InitPage,this.isMore = false]);
}
```

##### 2.配合rxDart使用

```dart
  BehaviorSubject<RequestDataSource> _rentDataSource = BehaviorSubject<RequestDataSource>();
  Sink<RequestDataSource> get _rentDataSourceSink => _rentDataSource.sink;
  Stream<RequestDataSource> get rentDataSourceStream => _rentDataSource.stream.asBroadcastStream();
```

##### 3.请求后装载数据

```
RequestDataSource _dataSource = new new RequestDataSource(RequestTypeEnum.InitPage, []);
_rentDataSourceSink.add(_dataSource);
```

##### 4.ui界面使用

```dart
StreamBuilder(
              stream: rentDataSourceStream,
              builder: (BuildContext context,
                  AsyncSnapshot<RequestDataSource> snapshot) {
                RequestDataSource _dataSource = snapshot?.data?? new RequestDataSource(RequestTypeEnum.InitPage, []);
                  ///根据RequestTypeEnum枚举状态加载不同页面
                  return Container();
              })
```



九机面试

过了(工资压得太狠了)

一、设置模式key

RcTheme.rcColor对应为颜色,自己项目封装的主题色

fluro路由传参时需要解析到地址上

一、简单的数据处理模式