Flutter车牌号⾝份证等特殊输⼊框，以及通知传值
如上图，此类需求，需要特殊处理，由于本⼈很懒就⾃⼰写了⼀套： Container套text来实现此需求。
Top 1.
⽤ GridView.builder 来实现 那⼏个框框
GridView.builder(
shrinkWrap: true,
physics:
new NeverScrollableScrollPhysics(),
//禁⽌滑动
itemCount: 8,
//SliverGridDelegateWithFixedCrossAxisCount 构建⼀个横轴固定数量Widget
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
/
/横轴元素个数
crossAxisCount: 8,
//纵轴间距
mainAxisSpacing:
0.0,
//横轴间距
crossAxisSpacing:
5.0,
//⼦组件宽⾼长度⽐例
childAspectRatio:
15 / 20),
itemBuilder:
(BuildContext context,
int item) {
return Container(
width: 15,
height: 20,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(
5),
border: Border.all(
Top 4.
CarKeyboard 封装代码
const PROVINCES = [
'京',  '沪', '津', '渝', '冀','晋','蒙', '辽','吉','⿊','苏','浙', '皖','闽','赣','鲁','豫',      '鄂', '湘','粤','桂',  '琼',  '川',  '贵', '云', '藏','陕', '⽢','青','宁', '新' ];
const ALPHABETS = [
'A',  'B', 'C', 'D', 'E', 'F', 'G','H', 'I',  'J','K',  'L', 'M','N','O', 'P', 'Q', 'R', 'S', 'T', 'U',
'V','W','X', 'Y', 'Z', '0', '1','2', '3', '4',  '5','6','7','8','9',
'学', '警','挂',
];
class CarKeyboard extends StatefulWidget {
final ValueChanged<String> onChanged; //传值
final int type; //
const CarKeyboard({
Key key,
}) : super(key: key);
@override
_CarKeyboardState createState() => _CarKeyboardState();
}
class _CarKeyboardState extends State<CarKeyboard> {
bool showBool = true;
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
color: Color.fromRGBO(192, 198, 199, 0.7),
child: Column(
mainAxisAlignment: d,
children: [
SizedBox(
height: 10,
),
Row(
children: [
SizedBox(
width: 10,
),
fontweight属性boldInkWell(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: 50,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Color.fromRGBO(164, 170, 174, 1)),
child: Align(
alignment: ,
child: Text(
'取消',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
)),
)),
),
Expanded(child: SizedBox()),
Text(
'选择车牌号',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
Expanded(child: SizedBox()),
InkWell(
onTap: () {
//添加监听者
NotificationCenter.instance.addObserver('change',
(object) {
setState(() {
if (object == 0) showBool = true;
if (object == 1) showBool = false;
//移除监听
NotificationCenter.instance
.removeNotification('change');
});
});
},
child: Container(
width: 50,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Color.fromRGBO(164, 170, 174, 1)),
child: Align(
alignment: ,
child: Text(
'X',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
)),
),
SizedBox(
width: 10,
),
]
,
),
SizedBox(
height: 10,
),
Row(children: [
SizedBox(
width: 10,
),
Expanded(
child: GridView.builder(
shrinkWrap: true,
// physics:  NeverScrollableScrollPhysics(),
//禁⽌滑动
itemCount:
showBool ? PROVINCES.length : ALPHABETS.length,
//SliverGridDelegateWithFixedCrossAxisCount 构建⼀个横轴固定数量Widget                      gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
//横轴元素个数
crossAxisCount: 7,
//纵轴间距
mainAxisSpacing: 10.0,
//横轴间距
crossAxisSpacing: 10.0,
//⼦组件宽⾼长度⽐例
childAspectRatio: 30 / 30),