flutter好用的輪子推薦二十-flutter仿iPhone鎖屏介面

小小包子發表於2019-12-08

前言

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生使用者介面。

IT界著名的尼古拉斯·高爾包曾說:輪子是IT進步的階梯!熱門的框架千篇一律,好用輪子萬里挑一!Flutter作為這兩年開始崛起的跨平臺開發框架,其第三方生態相比其他成熟框架還略有不足,但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來,給大家提高搬磚效率,同時也希望flutter的生態越來越完善,輪子越來越多。

本系列文章準備了超過50個輪子推薦,工作原因,儘量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者,入門請戳:flutter官網

正文

輪子

  • 輪子名稱:passcode_screen
  • 輪子概述:flutter仿iPhone鎖屏介面.
  • 輪子作者:vladimir.hudnitsky@gmail.com
  • 推薦指數:★★★★
  • 常用指數:★★★
  • 效果預覽:
    效果圖

安裝

dependencies:
  passcode_screen: ^1.0.2
複製程式碼
import 'package:passcode_screen/passcode_screen.dart';
import 'package:passcode_screen/circle.dart';//如需要自定義密碼圓點UI時需引入
import 'package:passcode_screen/keyboard.dart';//如需要自定義鍵盤UI時需引入
複製程式碼

基本使用

使用 PasscodeScreen 構建密碼鎖屏介面,引數配置如下:

PasscodeScreen(
    title: "請輸入鎖屏密碼",
    passwordEnteredCallback: _onPasscodeEntered,//密碼輸入後的處理方法
    cancelLocalizedText: '取消',//取消按鈕文字
    deleteLocalizedText: '刪除',//刪除按鈕文字
    shouldTriggerVerification: _verificationNotifier.stream,//控制器通知
    circleUIConfig: CircleUIConfig(//自定義密碼圓點ui 可不填
        borderColor: color,
        fillColor: color,
        circleSize: 30
    ),
    keyboardUIConfig: KeyboardUIConfig(digitBorderWidth: 2, primaryColor: color),//自定義鍵盤ui 可不填
    backgroundColor: Colors.black.withOpacity(0.8),//背景透明度
    cancelCallback: _onPasscodeCancelled,//取消按鈕回撥  
)
複製程式碼

示例

點選按鈕彈出鎖屏介面,輸入123456後解鎖:

1.在按鈕事件中,push鎖屏介面

openLockScreen(){
    Navigator.push(context,PageRouteBuilder(opaque: false,pageBuilder: (context, animation, secondaryAnimation) {
        return PasscodeScreen(
            title: "請輸入鎖屏密碼",
            passwordEnteredCallback: _onPasscodeEntered,//密碼輸入後的處理方法
            cancelLocalizedText: '取消',//取消按鈕文字
            deleteLocalizedText: '刪除',//刪除按鈕文字
            shouldTriggerVerification: _verificationNotifier.stream,//控制器通知
            circleUIConfig: CircleUIConfig(//自定義密碼圓點ui 可不填
                borderColor: color,
                fillColor: color,
                circleSize: 30
            ),
            keyboardUIConfig: KeyboardUIConfig(digitBorderWidth: 2, primaryColor: color),//自定義鍵盤ui 可不填
            backgroundColor: Colors.black.withOpacity(0.8),//背景透明度
            cancelCallback: _onPasscodeCancelled,//取消按鈕回撥  
        );	
    }));
}
複製程式碼

2.定義控制器通知

final StreamController<bool> _verificationNotifier = StreamController<bool>.broadcast();
//需引入 import 'dart:async';
複製程式碼

3.密碼輸入後的處理方法 _onPasscodeEntered 與點選取消處理方法 _onPasscodeCancelled

_onPasscodeEntered(String enteredPasscode) {
    bool isValid = '123456' == enteredPasscode;
    _verificationNotifier.add(isValid);
}
_onPasscodeCancelled(){
    print("點選取消");
}
複製程式碼

4.在頁面銷燬時登出控制器

@override
void dispose() {
    _verificationNotifier.close();
    super.dispose();
}
複製程式碼

結尾

相關文章