最近在用Flutter寫一個頁面的時候，需要使用到CheckBox，樣式需要如圖所示
首先想到的是使用官方的CheckBox，度娘搜了一大圈，也都是關于官方CheckBox的簡單介紹，比如這篇文章 : Flutter Checkbox 復選框，介紹的還挺詳細的，
但是看了一圈之后，發現官方的CheckBox控制元件無法滿足我的需要 : Border無法指定寬度，CheckBox無法指定大小，
所以，只能自己去找第三方庫了，終于在Github上找到了一個比較滿意的庫: round_check_box
可以指定邊框寬度、控制元件大小、選中的Icon等等，自定義化程度比較高
使用
在pubspec.yaml上添加依賴
dependencies:
roundcheckbox: ^2.0.4+1
附上代碼
RoundCheckBox(
size: 15,
checkedWidget: const Icon(
Icons.check,
color: Colors.white,
size: 10,
),
checkedColor: Color(0xFF3C78FF),
uncheckedColor: Color(0x003C78FF),
border: Border.all(
color: getCheckBoxBorderColor(),
width: 1),
isChecked: check,
onTap: (selected) {
this.check = selected!;
setState(() {});
}),
var check = false;
getCheckBoxBorderColor() {
if (check) {
return const Color(0xFF3C78FF);
} else {
return const Color(0xFFD1D1D1);
}
}
來看下效果
未勾選狀態
已勾選狀態
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/401669.html
標籤：其他