BruceGerGer

flutter开发实战-实现css线性渐变转换flutter渐变LinearGradient功能

在之前项目开发中，遇到更换样式，由于从服务器端获取的样式均为css属性值，需要将其转换成flutter类对应的属性值。这里只处理线性渐变linear-gradient
比如渐变
“linear-gradient(to right, rgba(246, 12, 112, .6) 30%, rgba(46, 112, 112, .8) 30%, rgba(46, 12, 145, .8) 30%)”
需要将其转换成LinearGradient属性值。

下面先看效果图

一、css渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

direction：用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,…：用于指定渐变的起止颜色。

请参考查看
https://blog.csdn.net/gloryFlow/article/details/131713101

二、将css的属性值转换成flutter类LinearGradient

LinearGradient一个用于创建线性渐变颜色装饰

下面实现以下将css渐变转换成flutter中的LinearGradient类属性值的过程。

看下css，如linear-gradient(180deg, #f34cf6 20%, #ea3e7f, #ea3e7f 100%)

效果如下

首先，第一个direction是180deg，或者to left，这里暂时只处理这两种格式。
第二，之后是颜色颜色值和stop

我们需要将其转换成flutter的线性渐变对应的类。我们定义类如下

// 渐变方向
enum SkinGradientTo {
  top, // 向上
  bottom, // 向下
  left, // 向左
  right, // 向右
}

// 渐变类
class SkinGradient {
  double? degree; // 角度
  SkinGradientTo? gradientTo; // 方向
  List<Color>? colors; // 颜色
  List<double>? stops;
}

我们进行以下步骤。

2.1 处理css线性渐变的direction

现将css线性渐变字符串valueString，去除多余空格，最后原先有空格的每个值之间值保留一个空格。

代码如下

  // 方式就是遍历两个空格，将其替换成一个空格
  // 处理字符串中多个空格
  // red___50%转red_50%，_代表空格，处理多个连续空格
  static String dealMultContinuousBlank(String originString) {
    String twoBlank = "  ";
    bool hasTwoContinuousBlank = originString.contains(twoBlank);
    while(hasTwoContinuousBlank) {
      originString = originString.replaceAll(twoBlank, " ");
      hasTwoContinuousBlank = originString.contains(twoBlank);
      loggerDebug("originString:${originString}");
    }

    return originString;
  }

转换后的valueString结果格式为：linear-gradient(180deg, #f34cf6 20%, #ea3e7f, #ea3e7f 100%)

2.2 统一颜色处理，将css中的rgb、rgba全部转换成#FFFFFFFF或者#FFFFFF格式

由于需要根据逗号“,”进行拆分字符串，生成数组：[“180deg”," #f34cf6 20%“,” #ea3e7f"," #ea3e7f 100%"]
这里需要转换一下颜色格式，将css中的rgb、rgba全部转换成#FFFFFFFF或者#FFFFFF格式。
代码如下

 // 处理rgba字符串转成Color
  static Color? rgbaToColor(String rgbaString) {
    String start = "rgba";
    if (rgbaString.startsWith(start)) {
      // rgba(152, 69, 255, 0.75)
      String subColorStr = rgbaString.substring(start.length);
      String noBlank = subColorStr.replaceAll(RegExp(r"\s*"), "");

      String noLeftBrackets = noBlank.replaceAll("(", "");
      String gDgColor = noLeftBrackets.replaceAll(")", "");
      List<String> colors = gDgColor.split(",");

      if (colors != null && colors.length == 4) {
        String redStr = colors[0];
        String greenStr = colors[1];
        String blueStr = colors[2];
        String alphaStr = colors[3];
        int? red = int.parse(redStr);
        int? green = int.parse(greenStr);
        int? blue = int.parse(blueStr);
        double? alpha = double.parse(alphaStr);

        Color color = Color.fromRGBO(red, green, blue, alpha);
        return color;
      }
    }

    String rgbStart = "rgb";
    if (rgbaString.startsWith(rgbStart)) {
      // rgba(152, 69, 255)
      String subColorStr = rgbaString.substring(rgbStart.length);
      String noBlank = subColorStr.replaceAll(RegExp(r"\s*"), "");

      String noLeftBrackets = noBlank.replaceAll("(", "");
      String gDgColor = noLeftBrackets.replaceAll(")", "");
      List<String> colors = gDgColor.split(",");

      if (colors != null && colors.length == 3) {
        String redStr = colors[0];
        String greenStr = colors[1];
        String blueStr = colors[2];
        int? red = int.parse(redStr);
        int? green = int.parse(greenStr);
        int? blue = int.parse(blueStr);
        double alpha = 1.0;

        Color color = Color.fromRGBO(red, green, blue, alpha);
        return color;
      }
    }

    return null;
  }

  /// 颜色检测只保存 #RRGGBB格式 FF透明度
  /// [color] 格式可能是材料风/十六进制/string字符串
  /// 返回[String] #rrggbb 字符串
  static String? color2HEX(Color color) {
    // 0xFFFFFFFF
    //将十进制转换成为16进制 返回字符串但是没有0x开头
    String temp = color.value.toRadixString(16);
    if (temp.isNotEmpty) {
      loggerDebug("color2HEX temp：${temp}");
      if (temp.length == 8) {
        String hexColor = "#" + temp.substring(2, 8);
        return hexColor.toLowerCase();
      } else {
        String hexColor = "#" + temp;
        return hexColor.toLowerCase();
      }
    }

    return null;
  }

通过代码转换后生成数组

生成数组：[“180deg”," #f34cf6 20%“,” #ea3e7f"," #ea3e7f 100%"]

2.3 获得SkinGradientTo或者degree

生成的数组中第一个为direction，需要将其转换成SkinGradientTo或者degree，这里暂时只处理四个方向的
to

top, // 向上
  bottom, // 向下
  left, // 向左
  right, // 向右

四个方向。如果第一个元素包括deg时候，表示为角度

代码如下

String first = colors.first.trim().toLowerCase();

List gStops = [];
if (first.contains("deg")) {
  // 角度
  String aFirst = first.replaceAll(RegExp(r"\s*"), "");

  String dgs = aFirst.replaceAll("deg", "");
  double? dgDouble = double.parse(dgs);
  if (dgDouble != null) {
    // 为整型值
    gradient.degree = dgDouble;
  }
} else if (first.startsWith("to")) {
  // 方向
  String aFirst = first.replaceAll(RegExp(r"\s*"), "");

  String toStart = "to";
  String toStr = aFirst.substring(toStart.length);
  SkinGradientTo? gradientTo;
  if ("left" == toStr) {
    gradientTo = SkinGradientTo.left;
  } else if ("right" == toStr) {
    gradientTo = SkinGradientTo.right;
  } else if ("top" == toStr) {
    gradientTo = SkinGradientTo.top;
  } else if ("bottom" == toStr) {
    gradientTo = SkinGradientTo.bottom;
  }

  gradient.gradientTo = gradientTo;

}

如果第一个元素不包括"to"也不包括"deg"，则表示direction为缺省值，采取默认即可。

2.4 颜色colors与stops，

由于flutter中的线性渐变类，如果存在stops，则stops与colors的length必须一直，所以需要进行转换。

// 处理渐变的Color, 处理这种字符#280069 50%
  static Map<String, dynamic> handleGradientColor(String colorString) {
    List<String> contentList = colorString.split(" ");
    Map<String, dynamic> mapData = {};
    String? colorHex;
    if (contentList.isNotEmpty) {
      for (String str in contentList) {
        if (str.isNotEmpty) {
          if (str.startsWith("#")) {
            colorHex = str;
            break;
          } else if (str.contains("transparent")) {
            colorHex = str;
            break;
          } else {
            Color? aColor = kColorNameMap[str];
            if (aColor != null) {
              colorHex = str;
            }
          }
        }
      }
    }

    if (colorHex != null) {
      // 颜色的占比
      String colorRatio = findFirstRatio(colorString);
      if (colorRatio.isNotEmpty) {
        // 百分比，如50%
        String ratioStr = colorRatio.replaceAll("%", "");
        double ratio = double.parse(ratioStr) / 100.0;

        mapData["ratio"] = ratio;

        Color? color;

        Color? aColor = kColorNameMap[colorHex];
        if (aColor != null) {
          color = aColor;
        } else {
          color = hexColorString(colorHex);
        }
        mapData["color"] = color;
      } else {
        Color? color;
        Color? aColor = kColorNameMap[colorHex];
        if (aColor != null) {
          color = aColor;
        } else {
          color = hexColorString(colorHex);
        }

        // 没有设置颜色值Stop的百分比，则默认为-1
        double ratio = -1;
        mapData["color"] = color;
        mapData["ratio"] = ratio;
      }
    }
    loggerDebug("mapData:${mapData}");

    return mapData;
  }

// 颜色名称对应的color类，如red对应Colors.red
Map<String, Color> kColorNameMap = {
  'transparent':Colors.transparent,
  'black':Colors.black,
  'white':Colors.white,
  'gray':Colors.grey,
  'red':Colors.red,
  'green':Colors.green,
  'blue':Colors.blue,
  'cyan':Colors.cyan,
  'brown':Colors.brown,
  'lightblue':Colors.lightBlue,
  'lightgreen':Colors.lightGreen,
  'purple':Colors.purple,
  'yellow':Colors.yellow,
  'aqua':ColorUtil.hexColorString("00FFFF"),
  'fuchsia':ColorUtil.hexColorString("FF00FF"),
  'maroon':ColorUtil.hexColorString("800000"),
  'olive':ColorUtil.hexColorString("808000"),
  'navy':ColorUtil.hexColorString("000080"),
  'silver':ColorUtil.hexColorString("C0C0C0"),
  'teal':ColorUtil.hexColorString("C0C0C0"),
};

处理后，每个颜色的每一条均为{‘color’:“#FF808000”,‘stop’:“-1”}，或者stop有值{‘color’:“#FF808000”,‘stop’:“0.3”}

2.5 处理stops，将color的stop填充完整

由于出现缺省的color stop，缺省是默认值为-1，需要将其改成正确的值。

stops中如果第一条缺省时候，则设置为0；最后一条缺省，则设置为1，
目的是将#f34cf6 0%,#ff0100,#ff0200,#ea3e7f 50%,#0000ff,#000fff, #ea3e7f 100%

代码如下

 // 处理gStops值，将gStops中为-1的值转换成正确的值，-1只是占位值
  static List<double> dealGradientStops(List<double> stops) {
    // 如果stops值超过两个的时候
    int startIdx = -1;
    int endIdx = -1;

    int allNum = stops.length;

    if (stops.length >= 2) {
      int firstIdx = 0;
      int lastIdx = allNum - 1;

      double first = stops[firstIdx];
      double last = stops[lastIdx];
      if (first == -1) {
        stops.replaceRange(0, 1, [0.0]);
      }

      if (last == -1) {
        stops.replaceRange(lastIdx, allNum, [1.0]);
      }

      print("before stops:${stops}, num:${stops.length}");

      bool isHasDefaultValue = checkGradientStopsHasDefault(stops);
      while(isHasDefaultValue) {

        // 进入循环重新设置值
        startIdx = -1;
        endIdx = -1;

        // 判断出startIdx
        for(int index = 0; index < allNum; index++) {
          double value = stops[index];
          int nextIdx = index+1;

          if(nextIdx < allNum) {
            double nextValue = stops[nextIdx];

            if (value != -1.0 && nextValue == -1.0) {
              startIdx = index;
              break;
            }
          }
        }

        // 判断出endIdx
        for(int index = 0; index < allNum; index++) {
          double value = stops[index];

          if (value != -1.0 && index > startIdx) {
            endIdx = index;
            break;
          }
        }

        print("step stops:${stops}, num:${stops.length}");

        if(endIdx >= startIdx) {
          print("startIdx:${startIdx}, endIdx:${endIdx}");

          int betweenNum = endIdx - startIdx;
          double startValue = stops[startIdx];
          double endValue = stops[endIdx];

          double aTValue = endValue - startValue;
          double perValue = aTValue/(betweenNum);

          List<double> replacements = [];
          double beginValue = startValue;
          for(int i = startIdx+1; i < endIdx; i++) {
            double value = beginValue + perValue;
            replacements.add(value);
            beginValue = value;
          }
          stops.replaceRange(startIdx+1, endIdx, replacements);
        }

        isHasDefaultValue = checkGradientStopsHasDefault(stops);
      }

    } else if (stops.length == 1) {
      double first = stops[0];
      if (first == -1) {
        stops.replaceRange(0, 1, [0.0]);
      }
    }

    return stops;
  }

2.5 得到所需数据类SkinGradient属性值

这时候得到完所需要的数据degree、gradientTo、colors、stops

将其转换为LinearGradient

LoggerManager().debug(
“decorationGradient gradient colors: ${gradient.colors}, stops:$ {gradient.stops}, gradientTo:${gradient.gradientTo}”);

Alignment begin = Alignment.centerLeft;
Alignment end = Alignment.centerRight;
GradientRotation? transform;
if (gradient.gradientTo != null) {
if (SkinGradientTo.top == gradient.gradientTo) {
// 向上
begin = Alignment.bottomCenter;
end = Alignment.topCenter;
} else if (SkinGradientTo.bottom == gradient.gradientTo) {
// 向下
begin = Alignment.topCenter;
end = Alignment.bottomCenter;
} else if (SkinGradientTo.left == gradient.gradientTo) {
// 向左
begin = Alignment.centerRight;
end = Alignment.centerLeft;
} else if (SkinGradientTo.right == gradient.gradientTo) {
// 向右
begin = Alignment.centerLeft;
end = Alignment.centerRight;
}
} else {
// 角度
// 计算角度
if (gradient.degree != null && gradient.degree != 0) {
double p = 180.0;
double radians = (math.pi / p) * gradient.degree!;
transform = GradientRotation(radians);

  // 和css角度，方向保持一致
  begin = Alignment.bottomCenter;
  end = Alignment.topCenter;
}

}

LinearGradient linearGradient;
if (gradient.colors != null &&
gradient.stops != null &&
gradient.colors!.length == gradient.stops!.length) {
linearGradient = LinearGradient(
colors: gradient.colors!,
stops: gradient.stops!,
begin: begin,
end: end,
transform: transform,
);
} else {
linearGradient = LinearGradient(
colors: gradient.colors ?? [],
begin: begin,
end: end,
transform: transform,
);
}

至此转换完成了，先看下效果图

完整代码如下

import 'dart:ui';

import 'package:flutter/material.dart';

import 'color_util.dart';
import 'dart:math' as math;

// 颜色名称对应的color类，如red对应Colors.red
Map<String, Color> kColorNameMap = {
  'transparent':Colors.transparent,
  'black':Colors.black,
  'white':Colors.white,
  'gray':Colors.grey,
  'red':Colors.red,
  'green':Colors.green,
  'blue':Colors.blue,
  'cyan':Colors.cyan,
  'brown':Colors.brown,
  'lightblue':Colors.lightBlue,
  'lightgreen':Colors.lightGreen,
  'purple':Colors.purple,
  'yellow':Colors.yellow,
  'aqua':ColorUtil.hexColorString("00FFFF"),
  'fuchsia':ColorUtil.hexColorString("FF00FF"),
  'maroon':ColorUtil.hexColorString("800000"),
  'olive':ColorUtil.hexColorString("808000"),
  'navy':ColorUtil.hexColorString("000080"),
  'silver':ColorUtil.hexColorString("C0C0C0"),
  'teal':ColorUtil.hexColorString("C0C0C0"),
};

// 渐变样式
enum SkinGradientStyle {
  line, // 线性渐变
}

// 渐变方向
enum SkinGradientTo {
  top, // 向上
  bottom, // 向下
  left, // 向左
  right, // 向右
}

// 渐变
class SkinGradient {
  SkinGradientStyle? style; // 样式
  double? degree; // 角度
  SkinGradientTo? gradientTo; // 方向
  List<Color>? colors; // 颜色
  List<double>? stops;
}

// 描边
class SkinDecorationStroke {
  double? width;
  Color? color;
}


// 主题皮肤配置
class SkinThemeConfig {
  /// 转换css到具体的element类
  static SkinGradient? transformThemeGradient(
      { required String value}) {

    try {
        if (value != null && value.isNotEmpty) {
          value = dealMultContinuousBlank(value);
          value = value.trimLeft().trimRight().toLowerCase();
          // 渐变

          SkinGradient? gradient = transformGradient(value);
          if (gradient != null) {
            return gradient;
          }

          return null;
        }
    } catch (e) {
      return null;
    }
  }

  /// 转换css到具体的element类
  static LinearGradient? transformLineGradient(
      {SkinGradient? gradient}) {

    try {
      if (gradient != null) {
        Alignment begin = Alignment.centerLeft;
        Alignment end = Alignment.centerRight;
        GradientRotation? transform;
        if (gradient.gradientTo != null) {
          if (SkinGradientTo.top == gradient.gradientTo) {
            // 向上
            begin = Alignment.bottomCenter;
            end = Alignment.topCenter;
          } else if (SkinGradientTo.bottom == gradient.gradientTo) {
            // 向下
            begin = Alignment.topCenter;
            end = Alignment.bottomCenter;
          } else if (SkinGradientTo.left == gradient.gradientTo) {
            // 向左
            begin = Alignment.centerRight;
            end = Alignment.centerLeft;
          } else if (SkinGradientTo.right == gradient.gradientTo) {
            // 向右
            begin = Alignment.centerLeft;
            end = Alignment.centerRight;
          }
        } else {
          // 角度
          // 计算角度
          if (gradient.degree != null && gradient.degree != 0) {
            double p = 180.0;
            double radians = (math.pi / p) * gradient.degree!;
            transform = GradientRotation(radians);

            // 和css角度，方向保持一致
            begin = Alignment.bottomCenter;
            end = Alignment.topCenter;
          }
        }

        LinearGradient linearGradient;
        if (gradient.colors != null &&
            gradient.stops != null &&
            gradient.colors!.length == gradient.stops!.length) {
          linearGradient = LinearGradient(
            colors: gradient.colors!,
            stops: gradient.stops!,
            begin: begin,
            end: end,
            transform: transform,
          );
        } else {
          linearGradient = LinearGradient(
            colors: gradient.colors ?? [],
            begin: begin,
            end: end,
            transform: transform,
          );
        }
        return linearGradient;
      }
    } catch (e) {
      return null;
    }
  }

  // 处理渐变，转换成渐变的类
  static SkinGradient? transformGradient(String valueString) {
    // value: linear-gradient(180deg, #ff34c6, #fea3e7)

    try {
      String value = valueString.toLowerCase();

      SkinGradient gradient = SkinGradient();
      gradient.style = SkinGradientStyle.line;

      String start = "linear-gradient";
      String subGradientValue =
      value.substring(start.length); // (180deg, #ff34c6, #fea3e7)

      // [rgba(119, 77, 255, .8), rgba(119, 177, 255, .8)]
      List<String> rgbaList = findRegRgbaColorList(subGradientValue);
      if (rgbaList.isNotEmpty) {
        // 将rgba(255, 77, 255, .8)转换成#ff34c6格式
        for (String rgbaString in rgbaList) {
          Color? rgbaColor = rgbaToColor(rgbaString);
          if (rgbaColor != null) {
            String? colorHex = ColorUtil.color2HEX(rgbaColor);
            subGradientValue =
                subGradientValue.replaceAll(rgbaString, colorHex ?? "");
          }
        }
      } else {
        List<String> rgbList = findRegRgbColorList(value);
        if (rgbList.isNotEmpty) {
          // 将rgb(255, 77, 255)转换成#ff34c6格式
          for (String rgbString in rgbList) {
            Color? rgbColor = rgbaToColor(rgbString);
            if (rgbColor != null) {
              String? colorHex = ColorUtil.color2HEX(rgbColor);
              subGradientValue =
                  subGradientValue.replaceAll(rgbString, colorHex ?? "");
            }
          }
        }
      }

      String noLeftBrackets =
      subGradientValue.replaceAll("(", ""); //180deg,#ff34c6,#fea3e7)
      String gDgColor =
      noLeftBrackets.replaceAll(")", ""); //180deg,#ff34c6,#fea3e7
      List<String> colors = gDgColor.split(",");

      print("gDgColor:${gDgColor} colors:${colors}");

      if (colors.isNotEmpty) {
        List<Color> gColors = [];

        String first = colors.first.trimLeft().trimRight().toLowerCase();

        List<double> gStops = [];
        if (first.contains("deg")) {
          // 角度
          String aFirst = first.replaceAll(RegExp(r"\s*"), "");

          String dgs = aFirst.replaceAll("deg", "");
          double? dgDouble = double.parse(dgs);
          if (dgDouble != null) {
            // 为整型值
            gradient.degree = dgDouble;
          }
        } else if (first.startsWith("to")) {
          // 方向
          String aFirst = first.replaceAll(RegExp(r"\s*"), "");

          String toStart = "to";
          String toStr = aFirst.substring(toStart.length);
          SkinGradientTo? gradientTo;
          if ("left" == toStr) {
            gradientTo = SkinGradientTo.left;
          } else if ("right" == toStr) {
            gradientTo = SkinGradientTo.right;
          } else if ("top" == toStr) {
            gradientTo = SkinGradientTo.top;
          } else if ("bottom" == toStr) {
            gradientTo = SkinGradientTo.bottom;
          }

          gradient.gradientTo = gradientTo;
        } else {
          Map<String, dynamic> mapData = handleGradientColor(first);

          double? ratio = mapData["ratio"];
          Color? color = mapData["color"];

          if (color != null) {
            gColors.add(color);
          }

          if (ratio != null) {
            gStops.add(ratio);
          }
        }

        // 遍历之后的
        for (int index = 1; index < colors.length; index++) {
          String colorString = colors[index].trimLeft().trimRight().toLowerCase();
          Map<String, dynamic> mapData = handleGradientColor(colorString);

          double? ratio = mapData["ratio"];
          Color? color = mapData["color"];

          if (color != null) {
            gColors.add(color);
          }

          if (ratio != null) {
            gStops.add(ratio);
          }
        }

        gradient.colors = gColors;

        // 处理后的新的stop数组
        List<double> gGdStops = dealGradientStops(gStops);
        gradient.stops = gGdStops;

        print("to:${gradient.gradientTo},degree:${gradient.degree},colors:${gradient.colors} gStops:${gradient.stops}");

        return gradient;
      }
    } catch (e) {
      return null;
    }
    return null;
  }

  // 处理渐变的Color, 处理这种字符#280069 50px
  static Map<String, dynamic> handleGradientColor(String colorString) {
    List<String> contentList = colorString.split(" ");
    Map<String, dynamic> mapData = {};
    String? colorHex;
    if (contentList.isNotEmpty) {
      for (String str in contentList) {
        if (str.isNotEmpty) {
          if (str.startsWith("#")) {
            colorHex = str;
            break;
          } else if (str.contains("transparent")) {
            colorHex = str;
            break;
          } else {
            Color? aColor = kColorNameMap[str];
            if (aColor != null) {
              colorHex = str;
            }
          }
        }
      }
    }

    if (colorHex != null) {
      // 颜色的占比
      String colorRatio = findFirstRatio(colorString);
      if (colorRatio.isNotEmpty) {
        // 百分比，如50%
        String ratioStr = colorRatio.replaceAll("%", "");
        double ratio = double.parse(ratioStr) / 100.0;

        mapData["ratio"] = ratio;

        Color? color;

        Color? aColor = kColorNameMap[colorHex];
        if (aColor != null) {
          color = aColor;
        } else {
          color = hexColorString(colorHex);
        }
        mapData["color"] = color;
      } else {
        Color? color;
        Color? aColor = kColorNameMap[colorHex];
        if (aColor != null) {
          color = aColor;
        } else {
          color = hexColorString(colorHex);
        }

        // 没有设置颜色值Stop的百分比，则默认为-1
        double ratio = -1;
        mapData["color"] = color;
        mapData["ratio"] = ratio;
      }
    }
    print("mapData:${mapData}");

    return mapData;
  }

  // 处理rgba字符串转成Color
  static Color? rgbaToColor(String rgbaString) {
    String start = "rgba";
    if (rgbaString.startsWith(start)) {
      // rgba(152, 69, 255, 0.75)
      String subColorStr = rgbaString.substring(start.length);
      String noBlank = subColorStr.replaceAll(RegExp(r"\s*"), "");

      String noLeftBrackets = noBlank.replaceAll("(", "");
      String gDgColor = noLeftBrackets.replaceAll(")", "");
      List<String> colors = gDgColor.split(",");

      if (colors != null && colors.length == 4) {
        String redStr = colors[0];
        String greenStr = colors[1];
        String blueStr = colors[2];
        String alphaStr = colors[3];
        int? red = int.parse(redStr);
        int? green = int.parse(greenStr);
        int? blue = int.parse(blueStr);
        double? alpha = double.parse(alphaStr);

        Color color = Color.fromRGBO(red, green, blue, alpha);
        return color;
      }
    }

    String rgbStart = "rgb";
    if (rgbaString.startsWith(rgbStart)) {
      // rgba(152, 69, 255)
      String subColorStr = rgbaString.substring(rgbStart.length);
      String noBlank = subColorStr.replaceAll(RegExp(r"\s*"), "");

      String noLeftBrackets = noBlank.replaceAll("(", "");
      String gDgColor = noLeftBrackets.replaceAll(")", "");
      List<String> colors = gDgColor.split(",");

      if (colors != null && colors.length == 3) {
        String redStr = colors[0];
        String greenStr = colors[1];
        String blueStr = colors[2];
        int? red = int.parse(redStr);
        int? green = int.parse(greenStr);
        int? blue = int.parse(blueStr);
        double alpha = 1.0;

        Color color = Color.fromRGBO(red, green, blue, alpha);
        return color;
      }
    }

    return null;
  }

  // 找到字符串中的第一个百分比百分比
  // 'abc rgba(119, 77, 255, .8) 88% , rgba(119, 177, 255, .8) 21%'
  // => [88%, 21%]
  static String findFirstRatio(String str) {
    RegExp exp = RegExp(r'[\d.]+%');
    RegExpMatch? match = exp.firstMatch(str);
    return match?.group(0) ?? '';
  }

  // 处理字符串中多个空格
  // red___50%转red_50%，_代表空格，处理多个连续空格
  static String dealMultContinuousBlank(String originString) {
    String twoBlank = "  ";
    bool hasTwoContinuousBlank = originString.contains(twoBlank);
    while(hasTwoContinuousBlank) {
      originString = originString.replaceAll(twoBlank, " ");
      hasTwoContinuousBlank = originString.contains(twoBlank);
      print("originString:${originString}");
    }

    return originString;
  }

  // 处理gStops值，将gStops中为-1的值转换成正确的值，-1只是占位值
  static List<double> dealGradientStops(List<double> stops) {
    // 如果stops值超过两个的时候
    int startIdx = -1;
    int endIdx = -1;

    int allNum = stops.length;

    if (stops.length >= 2) {
      int firstIdx = 0;
      int lastIdx = allNum - 1;

      double first = stops[firstIdx];
      double last = stops[lastIdx];
      if (first == -1) {
        stops.replaceRange(0, 1, [0.0]);
      }

      if (last == -1) {
        stops.replaceRange(lastIdx, allNum, [1.0]);
      }

      print("before stops:${stops}, num:${stops.length}");

      bool isHasDefaultValue = checkGradientStopsHasDefault(stops);
      while(isHasDefaultValue) {

        // 进入循环重新设置值
        startIdx = -1;
        endIdx = -1;

        // 判断出startIdx
        for(int index = 0; index < allNum; index++) {
          double value = stops[index];
          int nextIdx = index+1;

          if(nextIdx < allNum) {
            double nextValue = stops[nextIdx];

            if (value != -1.0 && nextValue == -1.0) {
              startIdx = index;
              break;
            }
          }
        }

        // 判断出endIdx
        for(int index = 0; index < allNum; index++) {
          double value = stops[index];

          if (value != -1.0 && index > startIdx) {
            endIdx = index;
            break;
          }
        }

        print("step stops:${stops}, num:${stops.length}");

        if(endIdx >= startIdx) {
          print("startIdx:${startIdx}, endIdx:${endIdx}");

          int betweenNum = endIdx - startIdx;
          double startValue = stops[startIdx];
          double endValue = stops[endIdx];

          double aTValue = endValue - startValue;
          double perValue = aTValue/(betweenNum);

          List<double> replacements = [];
          double beginValue = startValue;
          for(int i = startIdx+1; i < endIdx; i++) {
            double value = beginValue + perValue;
            replacements.add(value);
            beginValue = value;
          }
          stops.replaceRange(startIdx+1, endIdx, replacements);
        }

        isHasDefaultValue = checkGradientStopsHasDefault(stops);
      }

    } else if (stops.length == 1) {
      double first = stops[0];
      if (first == -1) {
        stops.replaceRange(0, 1, [0.0]);
      }
    }

    return stops;
  }


  // 判断数组中是否有占位的-1值
  static bool checkGradientStopsHasDefault(List<double> list) {
    for (int index = 0; index < list.length; index++) {
      double value = list[index];
      if (value == -1) {
        return true;
      }
    }

    return false;
  }
}

三、小结

flutter开发实战-实现css线性渐变转换flutter渐变LinearGradient功能

在之前项目开发中，遇到更换样式，由于从服务器端获取的样式均为css属性值，需要将其转换成flutter类对应的属性值。

学习记录，每天不停进步。

你可能感兴趣的:(flutter开发实战,flutter,移动开发,flutter,css,前端,渐变)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
现代汉语粗糙版文学史与经典学习搬运工
第十六章文学史与经典文学史的兴起在西方,虽然从亚里士多德开始,在人类的著述中已经可以找到文学史概念与写作方式的萌芽,但是,人们一般认为17世纪后期到18世纪是现代文学史写作真正开始的时期。长达百年波及整个欧洲的“古今之争”孕育出文学研究的历史意识,现代意义上的文学史观念在这场影响深远的论争中初见端倪。从18世纪晚期到19世纪初,由于席勒、弗·施莱格尔和赫尔德等人的介入,文学史研究逐渐变得复杂和成熟
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换让开，我要吃人了 OpenHarmony HarmonyOS 鸿蒙开发 harmonyos 华为鸿蒙移动开发鸿蒙系统前端开发语言
鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
免费像素画绘制软件 | Pixelorama v1.0.3 dntktop 软件运维 windows
Pixelorama是一款开源像素艺术多工具软件，旨在为用户提供一个强大且易于使用的平台来创作各种像素艺术作品，包括精灵、瓷砖和动画。这款软件以其丰富的工具箱、动画支持、像素完美模式、剪裁遮罩、预制及可导入的调色板等特色功能，满足了像素艺术家们的各种需求。用户可以享受到动态工具映射、洋葱皮效果、帧标签、播放动画时绘制等高级功能，以及非破坏性的、完全可定制的图层效果，如轮廓、渐变映射、阴影和调色板化
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
xml解析小猪猪08 xml
1、DOM解析的步奏准备工作： 1.创建DocumentBuilderFactory的对象 2.创建DocumentBuilder对象 3.通过DocumentBuilder对象的parse(String fileName)方法解析xml文件 4.通过Document的getElem
每个开发人员都需要了解的一个SQL技巧 brotherlamp linux linux视频 linux教程 linux自学 linux资料
对于数据过滤而言CHECK约束已经算是相当不错了。然而它仍存在一些缺陷，比如说它们是应用到表上面的，但有的时候你可能希望指定一条约束，而它只在特定条件下才生效。使用SQL标准的WITH CHECK OPTION子句就能完成这点，至少Oracle和SQL Server都实现了这个功能。下面是实现方式： CREATE TABLE books ( id &
Quartz——CronTrigger触发器 eksliang quartz CronTrigger
转载请出自出处：http://eksliang.iteye.com/blog/2208295 一.概述 CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案，调度规则基于 Cron 表达式，CronTrigger 支持日历相关的重复时间间隔（比如每月第一个周一执行），而不是简单的周期时间间隔。二.Cron表达式介绍 1）Cron表达式规则表 Quartz
Informatica基础 18289753290 Informatica Monitor manager workflow Designer
1. 1）PowerCenter Designer：设计开发环境，定义源及目标数据结构；设计转换规则，生成ETL映射。 2）Workflow Manager：合理地实现复杂的ETL工作流，基于时间，事件的作业调度 3）Workflow Monitor：监控Workflow和Session运行情况，生成日志和报告 4）Repository Manager：
linux下为程序创建启动和关闭的的sh文件，scrapyd为例酷的飞上天空 scrapy
对于一些未提供service管理的程序每次启动和关闭都要加上全部路径，想到可以做一个简单的启动和关闭控制的文件下面以scrapy启动server为例，文件名为run.sh： #端口号，根据此端口号确定PID PORT=6800 #启动命令所在目录 HOME='/home/jmscra/scrapy/' #查询出监听了PORT端口
人--自私与无私永夜-极光
今天上毛概课,老师提出一个问题--人是自私的还是无私的,根源是什么? 从客观的角度来看,人有自私的行为,也有无私的
Ubuntu安装NS-3 环境脚本随便小屋 ubuntu
将附件下载下来之后解压，将解压后的文件ns3environment.sh复制到下载目录下（其实放在哪里都可以，就是为了和我下面的命令相统一）。输入命令： sudo ./ns3environment.sh >>result 这样系统就自动安装ns3的环境，运行的结果在result文件中，如果提示 com
创业的简单感受 aijuans 创业的简单感受
2009年11月9日我进入a公司实习，2012年4月26日，我离开a公司，开始自己的创业之旅。今天是2012年5月30日，我忽然很想谈谈自己创业一个月的感受。当初离开边锋时，我就对自己说：“自己选择的路，就是跪着也要把他走完”，我也做好了心理准备，准备迎接一次次的困难。我这次走出来，不管成败
如何经营自己的独立人脉 aoyouzi 如何经营自己的独立人脉
独立人脉不是父母、亲戚的人脉，而是自己主动投入构造的人脉圈。“放长线，钓大鱼”，先行投入才能产生后续产出。现在几乎做所有的事情都需要人脉。以银行柜员为例，需要拉储户，而其本质就是社会人脉，就是社交！很多人都说，人脉我不行，因为我爸不行、我妈不行、我姨不行、我舅不行……我谁谁谁都不行，怎么能建立人脉？我这里说的人脉，是你的独立人脉。以一个普通的银行柜员
JSP基础百合不是茶 jsp 注释隐式对象
1,JSP语句的声明 <%! 声明 %> 　　声明：这个就是提供java代码声明变量、方法等的场所。表达式 <%= 表达式 %> 　　这个相当于赋值，可以在页面上显示表达式的结果，程序代码段/小型指令　<% 程序代码片段 %> 2,JSP的注释
web.xml之session-config、mime-mapping bijian1013 java web.xml servlet session-config mime-mapping
session-config 1.定义： <session-config> <session-timeout>20</session-timeout> </session-config> 2.作用：用于定义整个WEB站点session的有效期限，单位是分钟。 mime-mapping 1.定义： <mime-m
互联网开放平台（1） Bill_chen 互联网 qq 新浪微博百度腾讯
现在各互联网公司都推出了自己的开放平台供用户创造自己的应用，互联网的开放技术欣欣向荣，自己总结如下： 1.淘宝开放平台(TOP) 网址：http://open.taobao.com/ 依赖淘宝强大的电子商务数据，将淘宝内部业务数据作为API开放出去，同时将外部ISV的应用引入进来。目前TOP的三条主线： TOP访问网站：open.taobao.com ISV后台：my.open.ta
【MongoDB学习笔记九】MongoDB索引 bit1129 mongodb
索引可以在任意列上建立索引索引的构造和使用与传统关系型数据库几乎一样,适用于Oracle的索引优化技巧也适用于Mongodb 使用索引可以加快查询,但同时会降低修改,插入等的性能内嵌文档照样可以建立使用索引测试数据 var p1 = { "name":"Jack", "age&q
JDBC常用API之外的总结白糖_ jdbc
做JAVA的人玩JDBC肯定已经很熟练了，像DriverManager、Connection、ResultSet、Statement这些基本类大家肯定很常用啦，我不赘述那些诸如注册JDBC驱动、创建连接、获取数据集的API了，在这我介绍一些写框架时常用的API，大家共同学习吧。 ResultSetMetaData获取ResultSet对象的元数据信息
apache VelocityEngine使用记录 bozch VelocityEngine
VelocityEngine是一个模板引擎，能够基于模板生成指定的文件代码。使用方法如下： VelocityEngine engine = new VelocityEngine();// 定义模板引擎 Properties properties = new Properties();// 模板引擎属
编程之美-快速找出故障机器 bylijinnan 编程之美
package beautyOfCoding; import java.util.Arrays; public class TheLostID { /*编程之美假设一个机器仅存储一个标号为ID的记录，假设机器总量在10亿以下且ID是小于10亿的整数，假设每份数据保存两个备份，这样就有两个机器存储了同样的数据。 1.假设在某个时间得到一个数据文件ID的列表，是
关于Java中redirect与forward的区别 chenbowen00 java servlet
在Servlet中两种实现： forward方式：request.getRequestDispatcher(“/somePage.jsp”).forward(request, response); redirect方式：response.sendRedirect(“/somePage.jsp”); forward是服务器内部重定向，程序收到请求后重新定向到另一个程序，客户机并不知
[信号与系统]人体最关键的两个信号节点 comsci 系统
如果把人体看做是一个带生物磁场的导体,那么这个导体有两个很重要的节点,第一个在头部,中医的名称叫做百汇穴, 另外一个节点在腰部,中医的名称叫做命门如果要保护自己的脑部磁场不受到外界有害信号的攻击,最简单的
oracle 存储过程执行权限 daizj oracle 存储过程权限执行者调用者
在数据库系统中存储过程是必不可少的利器，存储过程是预先编译好的为实现一个复杂功能的一段Sql语句集合。它的优点我就不多说了，说一下我碰到的问题吧。我在项目开发的过程中需要用存储过程来实现一个功能，其中涉及到判断一张表是否已经建立，没有建立就由存储过程来建立这张表。 CREATE OR REPLACE PROCEDURE TestProc IS fla
为mysql数据库建立索引 dengkane mysql 性能索引
前些时候，一位颇高级的程序员居然问我什么叫做索引，令我感到十分的惊奇，我想这绝不会是沧海一粟，因为有成千上万的开发者（可能大部分是使用MySQL的）都没有受过有关数据库的正规培训，尽管他们都为客户做过一些开发，但却对如何为数据库建立适当的索引所知较少，因此我起了写一篇相关文章的念头。最普通的情况，是为出现在where子句的字段建一个索引。为方便讲述，我们先建立一个如下的表。
学习C语言常见误区如何看懂一个程序如何掌握一个程序以及几个小题目示例 dcj3sjt126com c 算法
如果看懂一个程序，分三步 1、流程 2、每个语句的功能 3、试数如何学习一些小算法的程序尝试自己去编程解决它，大部分人都自己无法解决如果解决不了就看答案关键是把答案看懂，这个是要花很大的精力，也是我们学习的重点看懂之后尝试自己去修改程序，并且知道修改之后程序的不同输出结果的含义照着答案去敲调试错误
centos6.3安装php5.4报错 dcj3sjt126com centos6
报错内容如下: Resolving Dependencies --> Running transaction check ---> Package php54w.x86_64 0:5.4.38-1.w6 will be installed --> Processing Dependency: php54w-common(x86-64) = 5.4.38-1.w6 for
JSONP请求 flyer0126 jsonp
使用jsonp不能发起POST请求。 It is not possible to make a JSONP POST request. JSONP works by creating a <script> tag that executes Javascript from a different domain; it is not pos
Spring Security（03）——核心类简介 234390216 Authentication
核心类简介目录 1.1 Authentication 1.2 SecurityContextHolder 1.3 AuthenticationManager和AuthenticationProvider 1.3.1 &nb
在CentOS上部署JAVA服务 java--hhf java jdk centos Java服务
本文将介绍如何在CentOS上运行Java Web服务，其中将包括如何搭建JAVA运行环境、如何开启端口号、如何使得服务在命令执行窗口关闭后依旧运行第一步：卸载旧Linux自带的JDK ①查看本机JDK版本 java -version 结果如下 java version "1.6.0"
oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date] ldzyz007 oracle mysql SQL Server
oracle &n
记Protocol Oriented Programming in Swift of WWDC 2015 ningandjin protocol WWDC 2015 Swift2.0
其实最先朋友让我就这个题目写篇文章的时候，我是拒绝的，因为觉得苹果就是在炒冷饭，把已经流行了数十年的OOP中的“面向接口编程”还拿来讲，看完整个Session之后呢，虽然还是觉得在炒冷饭，但是毕竟还是加了蛋的，有些东西还是值得说说的。通常谈到面向接口编程，其主要作用是把系统设计和具体实现分离开，让系统的每个部分都可以在不影响别的部分的情况下，改变自身的具体实现。接口的设计就反映了系统
搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS rensanning keepalived
（一）Keepalived （1）安装 # cd /usr/local/src # wget http://www.keepalived.org/software/keepalived-1.2.15.tar.gz # tar zxvf keepalived-1.2.15.tar.gz # cd keepalived-1.2.15 # ./configure # make &a
ORACLE数据库SCN和时间的互相转换 tomcat_oracle oracle sql
SCN（System Change Number 简称 SCN）是当Oracle数据库更新后，由DBMS自动维护去累积递增的一个数字，可以理解成ORACLE数据库的时间戳，从ORACLE 10G开始，提供了函数可以实现SCN和时间进行相互转换；　　用途：在进行数据库的还原和利用数据库的闪回功能时，进行SCN和时间的转换就变的非常必要了；　　操作方法：　　1、通过dbms_f
Spring MVC 方法注解拦截器 xp9802 spring mvc
应用场景，在方法级别对本次调用进行鉴权，如api接口中有个用户唯一标示accessToken,对于有accessToken的每次请求可以在方法加一个拦截器，获得本次请求的用户，存放到request或者session域。 python中，之前在python flask中可以使用装饰器来对方法进行预处理，进行权限处理先看一个实例,使用@access_required拦截： ?