直播系統app原始碼,自定義九宮格,計算器佈局,驗證碼認證
阿新 • • 發佈:2022-12-05
直播系統app原始碼,自定義九宮格,計算器佈局,驗證碼認證
1、先寫幾個接收驗證碼的文字框
return Scaffold(
backgroundColor: ColorsUtil.hexStringColor("#B1B1B1"),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(right: 12, left: 12),
width: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: ColorsUtil.hexStringColor("#F6F7FA")))),
child: Text(
"*",
textAlign: TextAlign.center,
style: TextStyle(
color: ColorsUtil.hexStringColor("#FFFFFF"),
fontSize: 24,
),
),
),
Container(
margin: EdgeInsets.only(right: 12, left: 12),
width: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: ColorsUtil.hexStringColor("#F6F7FA")))),
child: Text(
"*",
textAlign: TextAlign.center,
style: TextStyle(
color: ColorsUtil.hexStringColor("#FFFFFF"),
fontSize: 24,
),
),
),
Container(
margin: EdgeInsets.only(right: 12, left: 12),
width: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: ColorsUtil.hexStringColor("#F6F7FA")))),
child: Text(
"*",
textAlign: TextAlign.center,
style: TextStyle(
color: ColorsUtil.hexStringColor("#FFFFFF"),
fontSize: 24,
),
),
),
Container(
margin: EdgeInsets.only(right: 12, left: 12),
width: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: ColorsUtil.hexStringColor("#F6F7FA")))),
child: Text(
"*",
textAlign: TextAlign.center,
style: TextStyle(
color: ColorsUtil.hexStringColor("#FFFFFF"),
fontSize: 24,
),
),
),
],
),
SizedBox(
height: 36,
),
buildNumber(),
],
),
),
);
2、程式碼迴圈生成對應按鈕模組
buildNumber() {
List<Widget> tiles = [];
Widget content;
for (int i = 1; i <= 12; i++) {
tiles.add(
InkWell(child: getContainer(i),onTap: (){
print(i.toString());
},),
);
}
content = Container(
width: 300,
alignment: Alignment.center,
child: Wrap(
children: tiles,
),
);
return content;
}
3、修改邊框,對應特殊符號等按鈕
Widget getContainer(int index) {
if (index == 10) {
return Container(
width: 89,
height: 40,
);
} else if(index == 12){
return Container(
width: 89,
height: 40,
child: Icon(Icons.waterfall_chart),
);
}else {
return Container(
width: 89,
height: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width: 0,
color: ColorsUtil.hexStringColor("#000000", alpha: 0.5),
),
),
child: Text(
index.toString(),
style: TextStyle(
fontSize: 16,
),
),
);
}
}
以上就是直播系統app原始碼,自定義九宮格,計算器佈局,驗證碼認證, 更多內容歡迎關注之後的文章