快捷導(dǎo)航

Flutter實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)結(jié)果的示例詳解

更新時(shí)間：2023年08月10日 14:25:23 作者：島上碼農(nóng)

我們經(jīng)常在一些網(wǎng)站上看到這樣的密碼強(qiáng)度指示，使用三段線，分別用不同的顏色來(lái)表示弱密碼、中等強(qiáng)度密碼和強(qiáng)密碼，本篇我們就用?Flutter?來(lái)實(shí)現(xiàn)這樣一個(gè)密碼強(qiáng)度校驗(yàn)示例，希望對(duì)大家有所幫助

前言

我們經(jīng)常在一些網(wǎng)站上看到這樣的密碼強(qiáng)度指示，使用三段線，分別用不同的顏色來(lái)表示弱密碼、中等強(qiáng)度密碼和強(qiáng)密碼。這種方式能夠讓用戶清晰地感知到自己設(shè)置密碼的強(qiáng)度，體驗(yàn)上更為友好。本篇我們就用 Flutter 來(lái)實(shí)現(xiàn)這樣一個(gè)密碼強(qiáng)度校驗(yàn)示例。最終完成的效果如下圖。

組件分析

這里面實(shí)際上是密碼強(qiáng)度要?jiǎng)討B(tài)隨密碼輸入框的內(nèi)容改變，因此需要監(jiān)聽(tīng)輸入框內(nèi)容的變化。常規(guī)的做法是在輸入框的 onChanged 方法里 setState 來(lái)更新整個(gè)組件。但是，實(shí)際上有更優(yōu)雅的實(shí)現(xiàn)方式，那就是使用 Dart 的Stream 來(lái)實(shí)現(xiàn)局部刷新，也就是輸入內(nèi)容變化時(shí)只刷新密碼強(qiáng)度指示區(qū)域。稍后我們會(huì)講具體的實(shí)現(xiàn)。界面上，實(shí)際上組件的層級(jí)關(guān)系如下圖所示。

為了簡(jiǎn)化嵌套層級(jí)，我們將框起來(lái)的部分，也就是密碼強(qiáng)度指示單獨(dú)封裝成一個(gè)組件，叫做PasswordStrengthIndicator。這個(gè)組件也就是需要跟隨文本輸入框內(nèi)容變化而局部刷新的組件。這里順帶說(shuō)一下，如果要考慮局部刷新，那么就需要合理的封裝組件，將需要局部刷新的組件和不需要刷新的部分拆分開(kāi)，這樣就能夠在最小范圍控制要刷新的組件。最后是密碼強(qiáng)度校驗(yàn)的邏輯，我們的邏輯如下：

密碼長(zhǎng)度低于8或者只包含數(shù)字、字母和特殊字符中的一個(gè)，則認(rèn)為是弱密碼；
密碼長(zhǎng)度大于8，且只包含數(shù)字、字母和特殊字符中的兩個(gè)，則認(rèn)為是中等強(qiáng)度密碼；
密碼長(zhǎng)度大于8，且同時(shí)包含數(shù)字、字母和特殊字符，則認(rèn)為是強(qiáng)密碼。

這個(gè)邏輯可以通過(guò)正則匹配來(lái)完成。最后是密碼強(qiáng)度指示組件的實(shí)現(xiàn)，我們要保證三段線等寬且等比例，那么就可以用一個(gè) Flex 組件包裹一個(gè) Container 組件，設(shè)置比例 flex 值為1，就可以了。這樣做法的好處是不需要寫(xiě)死 Container 的寬度，適用性更強(qiáng)。

代碼實(shí)現(xiàn)

我們先來(lái)看一下 Stream 如何實(shí)現(xiàn)局部刷新。在 Flutter 里，提供了一個(gè) 基于 Stream 構(gòu)建組件的 StreamBuilder類(lèi)。當(dāng)StreamBuilder監(jiān)聽(tīng)到 Stream 內(nèi)容發(fā)生變化時(shí)，就會(huì)調(diào)用其builder方法重新構(gòu)建一個(gè)組件并返回。StreamBuilder的定義如下：

const StreamBuilder({
  super.key,
  this.initialData,
  super.stream,
  required this.builder,
});

這是一個(gè)泛型類(lèi)，因此可以接收任何類(lèi)型的數(shù)據(jù)，比如我們自定義的業(yè)務(wù)對(duì)象。其中各個(gè)參數(shù)說(shuō)明如下：

initialData 是初始值；
stream即要監(jiān)聽(tīng)的數(shù)據(jù)流，通常由一個(gè) StreamController 提供（也可以是網(wǎng)絡(luò)數(shù)據(jù)流）。
builder 即組件構(gòu)建方法，該方法會(huì)攜帶context和數(shù)據(jù)流對(duì)象，我們可以基于數(shù)據(jù)流對(duì)象的數(shù)據(jù)來(lái)構(gòu)建組件。

因此我們要監(jiān)聽(tīng)密碼輸入框內(nèi)容變化時(shí)，只需要使用一個(gè)StreamController對(duì)象，將變化后的內(nèi)容添加到數(shù)據(jù)流中。這樣，當(dāng)輸入框內(nèi)容變化時(shí)，就會(huì)觸發(fā)StreamBuilder刷新，我們從這個(gè)StreamController對(duì)象取出最新數(shù)據(jù)來(lái)構(gòu)建界面即可。這部分對(duì)應(yīng)的代碼如下。

final StreamController<String> _inputController = StreamController<String>();
// ...
@override
Widget build(BuildContext context) {
  //...
  TextField(
    keyboardType: TextInputType.visiblePassword,
    onChanged: (text) {
      _inputController.add(text);
    },
    decoration: const InputDecoration(labelText: '請(qǐng)輸入密碼'),
  ),
  //...
  StreamBuilder<String>(
    stream: _inputController.stream,
    initialData: '',
    builder: (context, snapshot) {
      final passwordStrength = calculateStrength(snapshot.data!);
      return PasswordStrengthIndicator(
          passwordStrength: passwordStrength, lineHeight: 4.0);
    },
  ),
}

PasswordStrengthIndicator是自定義的密碼指示器，實(shí)現(xiàn)的話是一個(gè) Row 組件，通過(guò) Flex 組件保持三段線（Container）等寬，代碼比較簡(jiǎn)單，如下所示。其中PasswordStrength是一個(gè)枚舉，有 weak、medium 和 strong 三個(gè)值，分別對(duì)應(yīng)弱密碼、中等強(qiáng)度密碼和強(qiáng)密碼。

class PasswordStrengthIndicator extends StatelessWidget {
  final PasswordStrength passwordStrength;
  final double lineHeight;
  const PasswordStrengthIndicator(
      {super.key, required this.passwordStrength, required this.lineHeight});
  final _strengthGapWidth = 8.0;
  @override
  Widget build(BuildContext context) {
    var passwordIndicator =
        PasswordIndicator(passwordStrength: passwordStrength);
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Flexible(
          flex: 1,
          child: Container(
            height: lineHeight,
            color: passwordIndicator.lineColors[0],
          ),
        ),
        SizedBox(width: _strengthGapWidth),
        Flexible(
          flex: 1,
          child: Container(
            height: lineHeight,
            color: passwordIndicator.lineColors[1],
          ),
        ),
        SizedBox(width: _strengthGapWidth),
        Flexible(
          flex: 1,
          child: Container(
            height: lineHeight,
            color: passwordIndicator.lineColors[2],
          ),
        ),
        SizedBox(width: _strengthGapWidth),
        Text(
          passwordIndicator.strengthText,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: passwordIndicator.strengthTextColor,
          ),
        ),
      ],
    );
  }
}

PasswordIndicator是一個(gè)自定義的實(shí)體類(lèi)，主要是簡(jiǎn)化密碼強(qiáng)度指示器的代碼，將組件顯示所需要的數(shù)據(jù)全部封裝到這個(gè)實(shí)體類(lèi)中，包括線段顯示的顏色，密碼強(qiáng)弱指示文字內(nèi)容和文字顏色。代碼如下：

class PasswordIndicator {
  final PasswordStrength passwordStrength;
  late List<Color> _lineColors;
  late String _strengthText;
  late Color _strengthTextColor;
  PasswordIndicator({required this.passwordStrength}) {
    switch (passwordStrength) {
      case PasswordStrength.weak:
        _lineColors = const [
          Color(0xFFCCCCCC),
          Color(0xFFCCCCCC),
          Color(0xFFCCCCCC)
        ];
        _strengthText = '弱';
        _strengthTextColor = Colors.red;
        break;
      case PasswordStrength.medium:
        _lineColors = const [
          Color(0xFF00A52B),
          Color(0xFF00A52B),
          Color(0xFFCCCCCC)
        ];
        _strengthText = '中等';
        _strengthTextColor = Colors.orange;
        break;
      default:
        _lineColors = const [
          Color(0xFF00A52B),
          Color(0xFF00A52B),
          Color(0xFF00A52B)
        ];
        _strengthText = '強(qiáng)';
        _strengthTextColor = const Color(0xFF00A52B);
        break;
    }
  }
  get lineColors => _lineColors;
  get strengthText => _strengthText;
  get strengthTextColor => _strengthTextColor;
}

最后是密碼強(qiáng)度校驗(yàn)邏輯，這個(gè)使用方法calculateStrength實(shí)現(xiàn)，其實(shí)這個(gè)也可以作為一個(gè)工具方法使用。方法定義如下，主要是通過(guò)正則來(lái)判斷密碼的強(qiáng)弱。

PasswordStrength calculateStrength(String password) {
    if (password.length >= 8) {
      bool hasDigit = false;
      bool hasLetter = false;
      bool hasSpecial = false;
      for (var char in password.split('')) {
        if (RegExp(r'[0-9]').hasMatch(char)) {
          hasDigit = true;
        } else if (RegExp(r'[A-Za-z]').hasMatch(char)) {
          hasLetter = true;
        } else {
          hasSpecial = true;
        }
      }
      if (hasDigit && hasLetter && hasSpecial) {
        return PasswordStrength.strong;
      } else if ((hasDigit && hasLetter) ||
          (hasDigit && hasSpecial) ||
          (hasLetter && hasSpecial)) {
        return PasswordStrength.medium;
      }
    }
    return PasswordStrength.weak;
  }
}

完整代碼

完整代碼已經(jīng)上傳至gitee:Flutter實(shí)用組件源碼。

到此這篇關(guān)于Flutter實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)結(jié)果的示例詳解的文章就介紹到這了,更多相關(guān)Flutter密碼強(qiáng)度校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: