用getx實現(xiàn)的設置密碼輸入框飞盆,含二次確認邏輯
也可以不用getx實現(xiàn)滑燃,_buildNumberWidget就是輸入框部分
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
class NewsPage2 extends GetView {
final TextEditingController _textEditingController = TextEditingController();
final FocusNode _textNode = FocusNode();
final _resultDataNew = ''.obs;
final _resultDataAgain = ''.obs;
final _isAgain = false.obs;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context) {
return Column(
children: [
SizedBox(height: 60, width: MediaQuery.sizeOf(context).width),
Text(
'設置支付密碼',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 8),
Obx(() {
return Text(
_isAgain.value == true ? '請再次填寫以確認' : '請設置密碼,用于支付驗證',
style: TextStyle(
fontSize: 15,
),
);
}),
Offstage(
offstage: true,
child: TextField(
controller: _textEditingController,
focusNode: _textNode,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
LengthLimitingTextInputFormatter(6),
FilteringTextInputFormatter.digitsOnly
],
onChanged: (value) {
// 再次填寫
if (_isAgain.value == true) {
_resultDataAgain.value = value;
// 再次填寫完成
if (value.length == 6) {
_isAgain.value = false;
_textEditingController.clear();
if (_resultDataNew.value == _resultDataAgain.value) {
// 接口校驗
_showDialog(context, '接口校驗');
} else {
// 兩次密碼輸入不一致
_resultDataNew.value = '';
_resultDataAgain.value = '';
_showDialog(context, '兩次密碼輸入不一致');
}
}
} else {
// 首次填寫
_resultDataNew.value = value;
// 首次填寫完成
if (value.length == 6) {
_isAgain.value = true;
_textEditingController.clear();
}
}
},
),
),
SizedBox(height: 60),
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
_textNode.requestFocus();
},
child: Obx(() {
if (_isAgain.value == true) {
return _buildNumberWidget(_resultDataAgain.value.length);
} else {
return _buildNumberWidget(_resultDataNew.value.length);
}
}),
),
],
);
}
Widget _buildNumberWidget(int length) {
return Container(
height: 47,
width: 282,
child: ListView.builder(
padding: EdgeInsets.zero,
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
itemCount: 6,
itemExtent: 47,
itemBuilder: (BuildContext context, int index) {
bool showPoint = index < length;
return _buildNumberItemWidget(index, showPoint);
},
),
);
}
Widget _buildNumberItemWidget(int index, bool showPoint) {
// 設置四周圓角 角度
BorderRadiusGeometry borderRadius = BorderRadius.only();
// 設置四周邊框
Color color = Colors.black12;
BorderSide borderSide0 = BorderSide(width: 0, color: color);
BorderSide borderSide05 = BorderSide(width: 0.5, color: color);
BoxBorder border = Border(top: borderSide05, left: borderSide05, bottom: borderSide05, right: borderSide0);
if (index == 0) {
borderRadius = BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4),
);
border = Border(top: borderSide05, left: borderSide05, bottom: borderSide05, right: borderSide0);
} else if (index == 5) {
borderRadius = BorderRadius.only(
topRight: Radius.circular(4),
bottomRight: Radius.circular(4),
);
border = Border.all(width: 0.5, color: color);
}
return Container(
height: 47,
width: 47,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: borderRadius,
border: border,
),
child: showPoint
? Container(
height: 10,
width: 10,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5),
),
)
: Container(),
);
}
void _showDialog(BuildContext context, String message) {
showDialog(context: context, builder: (context) {
return Center(
child: Container(
height: 50,
width: 100,
color: Colors.white,
child: Text(
message,
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 15,
),
),
),
);
});
}
}